Dark Style Css Drop Down Vertical Menu

Mengawali Tahun 2013 dengan Menu memenu, kembali menemani sahabat Blogger mengutak atik Blog dengan menu Dark  Style Css Drop Down Vertical yang tampilannya lumayan keren, terlepas nanti sahabat ingin pakai atau tidak di blog tercinta ada baiknya nyimak dulu atau di simpan dulu alasannya ialah mungkin suatu dikala mau di coba.
Demo di bawah ini
/* The CSS Code for the menu starts here .com */ #_box_menu{padding:0;margin:0;width:245px;list-style:none outside none} #_box_menu li{background:#252525;position:relative;border-bottom:1px solid #110f0e;border-top:1px solid #3d3732;} #_box_menu li ul{position:absolute;padding:0;margin:0;left:245px;top:-1px;display:none;width:160px;list-style:none outside none;z-index:9990;background:#00CC33} #_box_menu li a{background:url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;display:block;min-height:30px;line-height:30px;margin:0;padding:0 5px 0 25px;text-decoration:none;color:#777;color:#b69786;font-size:14px;border-right:4px solid #35322c;cursor:pointer;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out} #_box_menu li a:hover{border-right-color:#665d54;text-decoration:none;color:#ddd;background:#38332d url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;} #_box_menu li:hover ul, #bloggertrix_box_menu li.over ul{display:block}

Cara Pasang
Pertama
SIlahkan menuju Dasbord  lalu klik Template —> Edit HTML

Silahkan Cari aba-aba ]]></b:skin>

Letakkan Code berikut diatas ]]></b:skin>

/* The CSS Code for the menu starts here .com */ #_box_menu{padding:0;margin:0;width:245px;list-style:none outside none} #_box_menu li{background:#252525;position:relative;border-bottom:1px solid #110f0e;border-top:1px solid #3d3732;} #_box_menu li ul{position:absolute;padding:0;margin:0;left:245px;top:-1px;display:none;width:160px;list-style:none outside none;z-index:9990;background:#00CC33} #_box_menu li a{background:url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;display:block;min-height:30px;line-height:30px;margin:0;padding:0 5px 0 25px;text-decoration:none;color:#777;color:#b69786;font-size:14px;border-right:4px solid #35322c;cursor:pointer;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out} #_box_menu li a:hover{border-right-color:#665d54;text-decoration:none;color:#ddd;background:#38332d url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;} #_box_menu li:hover ul, #bloggertrix_box_menu li.over ul{display:block} 

Silahkan di Simpan

Kedua
Sobat Sebaiknya pasang Menu ini pada widget di kiri atau kanan Blog biar terlihat serasi.

Sekarang silahkan menuju Tata Letak + Tambah Gadget + HTML/JavaScript

Masukkanlah Code berikut kedalamnya

<ul id="_box_menu">     <li><a href="#">Menu List 1</a>         <ul>               <li><a href="#">Menu List 1.1</a></li>               <li><a href="#">Menu List 1.2</a></li>               <li><a href="#">Menu List 1.3</a></li>               <li><a href="#">Menu List 1.4</a></li>         </ul>     </li>          <li><a href="#">Menu List 2</a>         <ul>               <li><a href="#">Menu List 2.1</a></li>               <li><a href="#">Menu List 2.2</a></li>               <li><a href="#">Menu List 2.3</a></li>               <li><a href="#">Menu List 2.4</a></li>               <li><a href="#">Menu List 2.5</a></li>               <li><a href="#">Menu List 2.6</a></li>         </ul>     </li>          <li><a href="#">Menu List 3</a>         <ul>               <li><a href="#">Menu List 3.1</a></li>               <li><a href="#">Menu List 3.2</a></li>         </ul>     </li>          <li><a href="#">Menu List 4</a>         <ul>             <li><a href="#">Menu List 4.1</a></li>               <li><a href="#">Menu List 4.2</a></li>               <li><a href="#">Menu List 4.3</a></li>               <li><a href="#">Menu List 4.4</a></li>               <li><a href="#">Menu List 4.5</a></li>               <li><a href="#">Menu List 4.6</a></li>         </ul>     </li>          <li><a href="#">Menu List 5</a>           <ul>             <li><a href="">Menu List 5.1</a></li>               <li><a href="">Menu List 5.2</a></li>               <li><a href="">Menu List 5.3</a></li>               <li><a href="">Menu List 5.4</a></li>               <li><a href="">Menu List 5.5</a></li>               <li><a href="">Menu List 5.6</a></li>               <li><a href="">Menu List 5.7</a></li>               <li><a href="">Menu List 5.8</a></li>         </ul>     </li>          <li><a href="#">Menu List 6</a>         <ul>             <li><a href="#">Menu List 6.1</a></li>               <li><a href="">Menu List 6.2</a></li>               <li><a href="#">Menu List 6.3</a></li>               <li><a href="#">Menu List 6.4</a></li>               <li><a href="#">Menu List 6.5</a></li>               <li><a href="#">Menu List 6.6</a></li>               <li><a href="#">Menu List 6.7</a></li>               <li><a href="#">Menu List 6.8</a></li>         </ul>     </li>          <li><a href="#">Menu List 7</a>         <ul>             <li><a href="#">Menu List 7.1</a></li>               <li><a href="#">Menu List 7.2</a></li>               <li><a href="#">Menu List 7.3</a></li>               <li><a href="#">Menu List 7.4</a></li>               <li><a href="#">Menu List 7.5</a></li>               <li><a href="#">Menu List 7.6</a></li>               <li><a href="#">Menu List 7.7</a></li>               <li><a href="#">Menu List 7.8</a></li>         </ul>     </li>          <li><a href="#">Menu List 8</a>              <ul>             <li><a href="#">Menu List 8.1</a></li>               <li><a href="#">Menu List 8.2</a></li>               <li><a href="#">Menu List 8.3</a></li>               <li><a href="#">Menu List 8.4</a></li>               <li><a href="#">Menu List 8.5</a></li>               <li><a href="#">Menu List 8.6</a></li>         </ul>     </li>        </ul>

Silahhkan Ganti Code # dengan Link Blog anda dan Menu List dengan Nama Menunya

Semoga Bermanfaat

Leave a Reply

Your email address will not be published. Required fields are marked *