Sayfa Icerigi

DD Blue Blocks Menu

Yazan: ABAZAR

Bu orijinal Mavi Bloklar menüsü esinlenerek ve kardeş sitesi CSS Drive dikey menü tarafından kullanılan CSS dayalı dikey menü arayan bir blok, bizim çevrimiyle. Bu menü bağlantıları gruplar arasında bölücüler olarak hareket etmek menü başlıkları ekleme destekler.

Demo:

css yatay menu ornekleri 20 CSS ile dikey menü örnekleri

CSS:

<style type="text/css">
    #ddblueblockmenu{
    border: 1px solid black;
    border-bottom-width: 0;
    width: 185px;
    }
    #ddblueblockmenu ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
    }
    #ddblueblockmenu li a{
    display: block;
    padding: 3px 0;
    padding-left: 9px;
    width: 169px; /*185px minus all left/right paddings and margins*/
    text-decoration: none;
    color: white;
    background-color: #2175bc;
    border-bottom: 1px solid #90bade;
    border-left: 7px solid #1958b7;
    }
    * html #ddblueblockmenu li a{ /*IE only */
    width: 187px; /*IE 5*/
    width: 169px; /*185px minus all left/right paddings and margins*/
    }
    #ddblueblockmenu li a:hover {
    background-color: #2586d7;
    border-left-color: #1c64d1;
    }
    #ddblueblockmenu div.menutitle{
    color: white;
    border-bottom: 1px solid black;
    padding: 1px 0;
    padding-left: 5px;
    background-color: black;
    font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
    }
    </style>

HTML:

<div id="ddblueblockmenu">
    <div class="menutitle">Dynamic Drive</div>
    <ul>
    <li><a href="http://www.dynamicdrive.com">Home</a></li>
    <li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
    <li><a href="http://www.dynamicdrive.com/revised.htm">What's Revised</a></li>
    <li><a href="http://www.dynamicdrive.com/forums/">Help Forums</a></li>
    </ul>
    <div class="menutitle">CSS Library</div>
    <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 Effects</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Boxes & containers</a></li>
    <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" style="border-bottom-color: black">Links & Buttons</a></li>
    </ul>
    </div>

Sayfa Icerigi

bl0gger

DD Blue Blocks Menu

DD Blue Blocks Menu