Sayfa Icerigi

Arrow Bullet List Menu

Yazan: ABAZAR

Bu CSS liste menüsü varsayılan kenar boşluklarını ve kaldırılır dolgu bir iki tonlu arka plan, UL elemanları ile kategori başlıkları özellikleri ve nihayet, özel kurşun görüntüleri ile LI elemanları. Sonuç olarak basit bir şey ama, zarif ve benzer bir şey zaten bu sitede görmüş olabilir! Not: Bu menünün dinamik olarak genişler ve alt menüleri gizleyen bir sürümü için, Akordeon Menü bakın.

Demo:

CSS:

<style type="text/css">
    .arrowlistmenu{
    width: 180px; /*width of menu*/
    }
    .arrowlistmenu .headerbar{
    font: bold 14px Arial;
    color: white;
    background: black url(media/titlebar.png) repeat-x center left;
    margin-bottom: 10px; /*bottom spacing between header and rest of content*/
    text-transform: uppercase;
    padding: 4px 0 4px 10px; /*header text is indented 10px*/
    }
    .arrowlistmenu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
    }
    .arrowlistmenu ul li{
    padding-bottom: 2px; /*bottom spacing between menu items*/
    }
    .arrowlistmenu ul li a{
    color: #A70303;
    background: url(media/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
    display: block;
    padding: 2px 0;
    padding-left: 19px; /*link text is indented 19px*/
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid #dadada;
    font-size: 90%;
    }
    .arrowlistmenu ul li a:visited{
    color: #A70303;
    }
    .arrowlistmenu ul li a:hover{ /*hover state CSS*/
    color: #A70303;
    background-color: #F3F3F3;
    }
    </style>

HTML:

<div class="arrowlistmenu"> <h3 class="headerbar">CSS Library</h3> <ul> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> <h3 class="headerbar">CSS Drive</h3> <ul> <li><a href="http://www.cssdrive.com">CSS Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li> <li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li> <li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li> <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li> <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li> </ul> </div>

Sayfa Icerigi

bl0gger

Arrow Bullet List Menu

Arrow Bullet List Menu