Membuat Menubar dengan Sub Menu

Seperti kita ketahui, template modern kebanyakan telah dilengkapi dengan menubar. Nah, masalahnya menubar tersebut masih dalam keadaan standart. Beberapa menubar telah dilengkapi dengan submenu dan beberapa lagi belum. Banyak juga sobat blogger yang belum tahu bagaimana mengganti label pada menubar. Biasanya menubar standart masih terdiri dari Menu Home dan Edit Me. Nah, saya akan mencoba memberikan trik semudah mungkin untuk menggantinya juga cara mengganti URL nya sehingga menubar sesuai keinginan kita dan berfungsi dengan baik.


Nah, pada artikel saya sebelumnya terdapat kelemahan tidak bisa untuk semua template. Agar bisa maka harus ditambahkan kode cssnya secara lengkap. Sedang jika menambahkan kode css harus klop dengan atribut menubar di template yang tentu akan berbeda-beda.


Contoh CSS
 /* Navigation Menu
------------------------------------------------------*/
#NavbarMenu {
    background:#000;
    width: 930px;
    height: 33px;
    font-size: 13px;
    color: #FFF;
    font-weight: bold;
    margin: 15px auto 0;
    padding: 0px auto 0;}
#nav {
    margin: 0;
    padding: 0;}
#nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;}
#nav li {
    list-style: none;
    margin: 0;
    padding: 0;}
#nav li a, #nav li a:link, #nav li a:visited {
    color: #FFF;
    display: block;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0;
    padding: 9px 15px 8px;}
#nav li a:hover, #nav li a:active {
    background: #fff;
    color: #000;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;}
#nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #000;
    width: 150px;
    color: #FFF;
    font-weight: normal;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;}
#nav li li a:hover, #nav li li a:active {
    background:  #1074c9;
    color: #FFF;
    padding: 7px 10px;}
#nav li {
    float: left;
    padding: 0;}
#nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 170px;
    margin: 0;
    padding: 0;}
#nav li ul a {
    width: 140px;}
#nav li ul ul {
    margin: -32px 0 0 171px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    left: auto;}
#nav li:hover, #nav li.sfhover {
    position: static;}


Contoh Pengaturan Menubar

<div id='NavbarMenu'>
      <ul id='nav'>
        <li><a href='http://www.masdoyok.co.cc'>Menu 1</a></li>
<li><a href='http://www.masdoyok.co.cc'>Menu 2</a></li>
        <li>
          <a href='http://www.masdoyok.co.cc'>Menu 3</a>
          <ul>
            <li>
              <a href='http://www.masdoyok.co.cc'>Sub Menu</a>
              <ul>
                <li><a href='http://www.masdoyok.co.cc'>Subsubmenu</a></li>
                <li><a href='http://www.masdoyok.co.cc'>Subsubmenu</a></li>
                <li><a href='http://www.masdoyok.co.cc'>Subsubmenu</a></li>
                <li><a href='http://www.masdoyok.co.cc'>Subsubmenu</a></li>
              </ul>
            </li>
            <li><a href='http://www.masdoyok.co.cc'>Sub Menu</a></li>
            <li><a href='http://www.masdoyok.co.cc'>Sub Menu</a></li>
          </ul>
        </li>
        <li><a href='http://www.masdoyok.co.cc'>Menu 4</a></li>
             </ul>
    </div>

  

Di atas adalah hanyalah contoh css dan htmlnya. Setiap template tentu berbeda atributnya dan akan pengaruh penerapannya. Silahkan Anda cari kode css menubar/navigasi Anda. Perhatikan atributnya dan cermati contoh HTML di kode kedua. Yang berwarna merah harus sesuai atributnya dengan kode css.

Semoga bermanfaat