Tutorial : Dropdown Menu

Alhamdulillah selamat sampai ke hostel sebentar tadi . Abg teksi I handsome u . Umo pon baru 25 . Muda kan ? Hehehe.
Dah dah . Itu masuk mood menggedik . Tak baik Takbaik . Hehe . Okay siyes time okay.
Ada yang request dengan Cikk Mira aka sy tentang tuto . Tuto navigation bar bergabung dengan widget search . Yang nih siap ada dropdown lagi tau :P

sila tekan untuk ianya membesar yekkk ^^v

So let's proceed \(^_^)/
Steps

Pegi ke Dashboard > Template > Edit template
search code nih ]]>
Dah jumpa ? Then copy code bawah nih ek

#menujohanes{

width: 898px;

margin: auto;

background: #fff;

height: 50px;

-moz-transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

text-transform: uppercase;

position: relative;

border-left: 5px solid #FCD4DC;

border-right: 5px solid #FCD4DC;

border-bottom: 1px solid #ddd;

border-top: 1px solid #ccc;}

#menujohanes ul{

list-style-type: none;

z-index: 9;

width: 1000px;

margin: auto;}

#menujohanes ul li{

float: left;

position: relative;

padding: 12px;

-moz-transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;}

#menujohanes ul li:hover a.menu{color:#fff;}

#menujohanes ul li:hover{

background: #D7F6B0 repeat top center;

box-shadow: 0px 3px 0px rgba(0,0,0,0.2);}

#menujohanes ul li a:hover {

color:#fafafa;}

#menujohanes ul li a{

color: #666;

padding: 0 10px;

line-height:25px;

font-size:11px;

display:block;

text-decoration:none;

-moz-transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

text-shadow: 0px 2px 0px rgba(0,0,0,0.1);}

#menujohanes ul li ul li{float: none;position: relative;}

#menujohanes ul li ul{

position: absolute;

top:49px;

left:0;

display: none;

box-shadow: inset 0 4px 3px rgba(0, 0, 0, 0.3), 0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);

width:150px;

border-radius: 0px 0px 5px 5px;

background: #fff;}

#menujohanes ul li:hover > ul{display: block;}

#menujohanes ul li ul li a{line-height:25px;}

#menujohanes ul li ul li ul{

position: absolute;

top:0; left:150px;

display: none;

box-shadow:0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);

border-radius:5px;

width:150px;

background: #fff;}

#menujohanes ul li.selected{color: #000;border-right: 1px solid #FCD4DC;}

#search input[type="text"]:hover {width:160px;}

#search input[type="text"] {

background: #FAFAFA url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrEa6bSnLTl4b9nrQfi6XeZ5gYOlzwTuAA_hNdY3vtfIiog4pOhDrkwJS1b43wP-mog-1yT1tE2po4rcHjeD2Q973_wf6okILu7awu8PNOEz2iObq4vxSV_8MSrEJHH0_ljFSvxRlnsNA/s1600/SEARCH_32x32-32.png")no-repeat center left;

font-size: 12px;

background-position-y: 10px;

color: #222;

width: 0px;

padding: 11px 0px 7px 35px;

z-index: 9;

border: 1px solid #FAFAFA;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

margin-bottom: -1px;

position: absolute;

top: 0px;

right: 0px;

border-left: 1px solid #ddd;

height: 30px;}

Paste code atas nih atas code ]]>
Cari code
, untuk pengguna denim template
Dah ? Sekarang copy code bawah nih pulak ye.

<div id='menujohanes'>

<ul>

<li class='selected'><a href='LINK ANDA' title='Home'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBFLRsgM46vQrM_8o8iseuaW0v6_EbI1m9DKnnVg4hGcVi82CF4giKVG6X-Om1J4ByzhN_zB3hHSGjXIzm19Fg-qtpnGZ6MS2SKSGnpp3SVpaaFoSDl0y-L5ozeJKBbtt7au5bfnp8bow/s1600/home_white.png' style='padding:0px;'/> Home</a></li>

<li><a class='menu' href='LINK ANDA'>Dashboard</a></li>

<li><a class='menu' href='#'>About me</a> <ul>

<li><a href='LINK ANDA' target='new' title='SIAPA SAYA?'>Owner Blog</a></li>

<li><a href='LINK ANDA' target='new' title='Insan tersayang'>Me Family</a></li>

<li><a href='#'>Contact me</a> <ul>

<li><a href='LINK ANDA' target='new'> Twitter</a></li>

<li><a href='LINK ANDA' target='new'> Fanpage</a></li>

<li><a href='LINK ANDA' target='new'> Facebook</a></li>

</ul>

</li>

</ul>

</li>

<li><a class='menu' href='#'>Service editing blog</a> <ul>

<li><a href='LINK ANDA' title='my creation'>Own Portfolio</a></li>

<li class='hr'></li> <li><a href='LINK ANDA' title='Tempah servis saya'>My service</a></li>

<li class='hr'></li> <li><a href='LINK ANDA' title='portfolio'>My design</a></li>

<li class='hr'></li> <li><a href='LINK ANDA' title='ikot pakej'>Contoh Pakej</a></li>

</ul>

</li>

<li><a class='menu' href='#'>Exchange</a> <ul>

<li><a href='LINK ANDA' target='new'>Links</a></li>

<li><a href='LINK ANDA' target='new'> Banner</a></li>

</ul>

</li>

<li><a href='LINK ANDA' target='new'>Tutobies</a></li>

<li><a href='LINK ANDA' target='new'>Blogshop</a></li>

</ul> <form action='/search' id='search' method='get'> <input name='q' placeholder='Search Somethings..' size='40' type='text'/></form> </div>

Code yang atas nih korang paste bawah code , untuk pengguna denim template
Dah siap >.< Huu . Preview dlu tau :)

NOTA KAKI

Merah : Tajuk

BIRU : Warna

PURPLE : Warna border

LINK ANDA : ur link

#yang berwarna sahaja boleh ditukar

SELAMAT MENCUBA

If ada masalah dengan tuto nih do roger2 me yea . Klik my nufnang boleh ? Ahaks >.<

Search

Nice to meet you!

Follow me at

What Read Next

List Labels

Tutorial : Dropdown Menu

Comments

Post a Comment

Contact Form