Membuat menu navbar Metro Blue

Posted on
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/
Baca Juga :  Cara Mudah Pindah Hosting ke Server lain
Nah sobat… tutorial untuk mempercantik blog cukup dulu ya… semoga bermanfaat. dan tunggu tutorial blog selanjutnya

Gravatar Image

http://bakhtiyar.bsierad.com/

Leave a Reply