Top Ad unit 728 × 90

Hot News

recent

Membuat menu navbar Metro Blue




Halo sobat nunutjoe, sudah lama rasanya tak membuat tutorial untuk mempercantik blog. Saat ini akan dibahas mengenai menambahan menu navigasi atau yang biasa disebut menu navbar bergaya metro blue. menu hasil menu navigasi ini berwarna dasar biru tua dengan hover biru muda. tak hanya itu m dalam menu ini terdapat form search untuk melakukan searching konten yang ada pada blog. Untuk lebih jelasnya hasil dari menu navbar metro blue seperti berikut


Menu Navbar Metro blue

untuk lebih jelasnya untuk menghasilkan tampilan seperti diatas digunakan kode css seperti berikut

ul.dark_menu {
    list-style: none;
    padding: 5px 1px;
    font-family:'Segoe UI Light', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
    font-weight: 200;
    font-size: 16px;
    letter-spacing: 0.01em;
    font-smooth: always;
    color: #000000;
    line-height: 15px;
    margin: auto;
    width: 980px; /*Panjang dari navbar disesuaikan dengan templete*/
    position: relative;
    background: #2B5797;
}

 ul.dark_menu:after {
    content:"";
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}
ul.dark_menu li {
    float: left;
    position: relative;
    margin: 1px;
}

 ul.dark_menu li a, ul.dark_menu li a:link {
    color: #fafafa;
    text-decoration: none;
    display: block;
    padding: 8px 26px;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

 ul.dark_menu li a:hover {
    color: #fafafa;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

 ul.dark_menu li a.selected {
    border-right: 1px solid #ddd;
    text-transform: uppercase;
    margin-left: 10px;
}
ul.dark_menu li a.selected, ul.dark_menu li a:active {
    color: #fafafa;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
ul.dark_menu li ul {
    display: none;
}

 ul.dark_menu li ul:before {
    content:" ";
    position: absolute;
    display: block;
    z-index: 1500;
    left: 0;
    top: -10px;
    height: 10px;
    width: 100%;
}
ul.dark_menu li ul {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    top:55px;
}
ul.dark_menu li:hover ul {
    position: absolute;
    display: block;
    z-index: 1000;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    left: 0;
    border-radius: 0px 0px 5px 5px;
    top: 37px;
    padding: 5px 0;
    list-style: none;
    background: #fff;
}

 ul.dark_menu li ul li {
    float: none;
    margin:0px;
}
ul.dark_menu li ul li:first-child {
    margin:0px;
    border-top: 0 none;
}
ul.dark_menu li ul li:last-child {
    border-bottom: 0 none;
}

 ul.dark_menu[data-role="dropdown"] > a::before {
    position: absolute;
    content:"^";
    display: block;
    font-size: 15px;
    left: 100%;
    margin-left: -20px;
    top: 10px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
ul.dark_menu li ul li a, ul.dark_menu li ul li a:link {
    color: #222;
    display: block;
    background: transparent none;
    padding: 10px 25px 10px 25px;
    white-space: nowrap;
}
ul.dark_menu li ul li a:hover {
    background:#2D89EF;
    -moz-transition: all 0.1s ease-in-out;
    color:#fff;
    -webkit-transition: all 0.1s ease-in-out;
}

 .menujohanes {
    position:relative;
}
#search input[type="text"]:hover {
    width:800px; /*Panjang search box*/
}
#search input[type="text"] {
    background: #fff url("http://3.bp.blogspot.com/-uYZni0pIn-E/T-xY2vVu_-I/AAAAAAAACUY/ZMfR3_BvRFE/s1600/SEARCH_32x32-32.png")no-repeat center left;
    font-size: 13px;
    color: #222;
    width: 0px;
    padding: 10px 0px 11px 35px;
    z-index: 9;
    border: 1px solid #fff;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    margin-bottom: -1px;
    position: absolute;
    top: 0px;
    right:27px;
}
#main4, #main5, #main6 {
    width: 303px;
    list-style-type: none;
    float: left;
    margin: 10px;
}
.main3 {
    width:305px;
    list-style-type: none;
    padding-top: 10px;
    float: left;
}
::-webkit-scrollbar {
    height:12px;
    background: #474747;
}
::-webkit-scrollbar-thumb {
    background-color: #000;
}
ul.dark_menu li ul li ul li { display: none; }
ul.dark_menu li ul li:hover ul li { display: block;}
ul.dark_menu li ul li:hover ul { left: 100%; top: 0; }
setelah itu untuk mengisi menunya digunakan kode html sederhana seperti berikut

<div class='menujohanes'>
        <ul class='dark_menu'>
          <li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a> </li>
          <li data-role='dropdown'><a href='#'>Categories</a>
            <ul>
                 <li id='sub'><a href='#'>Lorem ipsum</a>
                    <ul
                      <li><a href='#'>Categories2 </a></li>
                      <li><a href='#'>Categories3</a></li>
                    </ul>
                </li>

              <li><a href='#'>Lorem ipsum</a></li>
              <li><a href='#'>Lorem ipsum</a></li>
              <li><a href='#'>Lorem ipsum</a></li>
              <li><a href='#'>Download</a></li>
              <li><a href='#'>Lorem ipsum </a></li>
            </ul>
          </li>
        </ul>
        <form action='/search' id='search' method='get'>
          <input name='q' placeholder='Cari Disini' size='40' type='text'/>
        </form>
      </div>
Untuk hasilnya bisa dilihat disini. nah.. dari kesemua ini saya mendapatkan referensi dari
  • http://stackoverflow.com/questions/17857276/how-to-add-sub-menu-to-dropdown-menu
  • http://jsfiddle.net/tkbub/1/
  • http://jsfiddle.net/6kDG8/2/
Nah sobat... tutorial untuk mempercantik blog cukup dulu ya... semoga bermanfaat. dan tunggu tutorial blog selanjutnya
Membuat menu navbar Metro Blue Reviewed by Bakhtiyar Sierad - Hosterbyte on Saturday, March 08, 2014 Rating: 5

No comments:

Don't Forget to leave comment

All Rights Reserved by Nunutjoe All In One © 2014 - 2015
Powered By Blogger, Designed by Sweetheme

Contact Form

Name

Email *

Message *

Powered by Blogger.