Membuat Tab Menu Responsive

DEMO

Cara Pemasangan :

• Masuk Template
• Cari /b:skin
• Pastekan Kode Dibawah Ini Diatasnya

.menu {position:relative; z-index:100;} .menu ul {padding:0; margin:0;list-style:none; font-family: 'arial', sans-serif; font-size:14px;} .menu > ul {height:35px; background:#555; border-radius:5px 5px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);} .menu > ul > li {float:left; position:relative; white-space:nowrap;} .menu > ul > li > a {line-height:35px; height:35px; display:block; margin-top:0; padding:0 10px; color:#fff; text-decoration:none; background:#555; border-radius:5px 5px 0 0} -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .menu ul ul {position:absolute; left:-9999px; top:36px; margin-top:40px; -webkit-transition: 0s 0.75s; -moz-transition: 0s 0.75s; -ms-transition: 0s 0.75s; -o-transition: 0s 0.75s; transition: 0s 0.75s; } .menu ul ul li span a {display:block; float:left; height:30px; width:160px; line-height:30px; background:#69c; padding:0 10px; color:#fff; text-decoration:none; margin-top:50px; box-shadow:0 10px 10px -10px rgba(0,0,0,0.7); -webkit-transition: 0s 0.75s; -moz-transition: 0s 0.75s; -ms-transition: 0s 0.75s; -o-transition: 0s 0.75s; transition: 0s 0.75s; } .menu ul ul li span a.last {border-radius:0 0 5px 5px;} .menu ul li:hover {z-index:100;} .menu > ul > li:hover > a {background:#69c; margin-top:-4px; height:40px; box-shadow:0 10px 10px -10px rgba(0,0,0,0.7); } .menu ul li:hover ul {left:0; width:180px; margin-top:0; -webkit-transition: margin 0.25s; -moz-transition: margin 0.25s; -ms-transition: margin 0.25s; -o-transition: margin 0.25s; transition: margin 0.25s; } .menu ul ul li span {display:block; opacity:0; -webkit-transition: 0.5s 0.25s; -moz-transition: 0.5s 0.25s; -ms-transition: 0.5s 0.25s; -o-transition: 0.5s 0.25s; transition: 0.5s 0.25s; } .menu ul li:hover ul li span {opacity:1; -webkit-transition:0.75s; -moz-transition:0.75s; -ms-transition:0.75s; -o-transition:0.75s; transition:0.75s; } .menu ul li:hover ul li span a {margin-top:0; -webkit-transition:0.75s; -moz-transition:0.75s; -ms-transition:0.75s; -o-transition:0.75s; transition:0.75s; } .menu ul li:hover ul li span a:hover {background:#555;} .menu ul + img {position:fixed; left:0; top:0; width:0; height:0; z-index:-1;} .menu ul:hover + img {width:100%; height:100%;} Cara Penerapan :

• Cari Kode </header>
• Pastekan Kode Dibawah Ini Tepat Dibawahnya

<div class="menu"> <ul> <li><a href="http://kiritoblogs.blogspot.com/">Lorem Ipsum</a></li> <li><a href="#url">Lorem Ipsum</a> <ul> <li> <span><a href="http://kiritoblogs.blogspot.com/">Lorem Ipsum</a> <span><a href="http://kiritoblogs.blogspot.com/">Lorem Ipsum</a> <span><a class="last" href="http://kiritoblogs.blogspot.com/">Lorem Ipsum</a> </span></span></span> </li> </ul> </li> <li><a href="#url">Lorem Ipsum</a> <ul> <li> <span><a href="http://kiritoblogs.blogspot.com/">Lorem Ipsum</a> <span><a href="http://kiritoblogs.blogspot.com/">Lorem Ipsum</a> <span><a href="http://kiritoblogs.blogspot.com/">Lorem Ipsum</a> <span><a href="http://kiritoblogs.blogspot.com/">Lorem Ipsum</a> <span><a href="http://kiritoblogs.blogspot.com/">Lorem Ipsum</a> <span><a class="last" href="http://kiritoblogs.blogspot.com/">Lorem Ipsum</a> </span></span></span></span></span></span> </li> </ul> </li> <li> </li> <li><a href="#url">Lorem Ipsum</a> <ul> <li> <span><a href="http://kiritoblogs.blogspot.com/">Lorem Ipsum</a> <span><a href="http://kiritoblogs.blogspot.com/">Lorem Ipsum</a> <span><a class="last" href="http://kiritoblogs.blogspot.com/">Lorem Ipsum</a> </span></span></span> </li> </ul> </li> </li> </li> </div>

Posted by Unknown on - Rating: 5.0

Title : Membuat Tab Menu Responsive
Description : DEMO Cara Pemasangan : Masuk Template Cari /b:skin Pastekan Kode Dibawah Ini Diatasnya .menu {position:relative; z-index:100;}...

Share to

Facebook Google+ Twitter