web design: Menu dengan Search Button

Menu dengan Search Button

Pada pertemuan kali ini saya akan berbagi menu dengan dengan search button yang keren dengan dropdown lain dari pada yang lain. kamu juga dapat melihat sendiri hasilnya setelah didowload atau lihat sendiri pada link Demo.juga dapat didowload pada link download. berikut ini saya jelaskan tag html dan cssnya :

Tag CSS nya

a:visited{color:#0099cc;
text-decoration:none;}

a:hover{color:#006c8e;
text-decoration:none;}

a:hover{box-shadow:inset 0px -2px 0px #E50700;}
a:hover{box-shadow:inset 0px -2px 0px #0084C5;}  li:nth-child(3) a:hover{box-shadow:inset 0px -2px 0px #6CAC00;}  li:nth-child(4) a:hover{box-shadow:inset 0px -2px 0px #00C3B7;} li:nth-child(5) a:hover{box-shadow:inset 0px -2px 0px #FF8168;}  li:nth-child(6) a:hover{box-shadow:inset 0px -2px 0px #FFBA0F;}

#search-top{float:left;
margin:4px 0px 4px 20px;
display:none;}

#search-top input[type="text"]{
box-shadow:inset 2px 2px 0px #f0f0f0;
border-radius:3px 0 0 3px;
height:25px;
width:100px;
line-height:24px;
background-color:#f8f8f8;
border:1px solid #d3d3d3;
outline:none;
font-size:13px;
padding:0 10px;
float:left;}
p
#search-top input#search-button-top{
box-shadow: inset 1px 1px 0 #f9f9f9;
border-radius:0 3px 3px 0;
height:27px;
width:30px;
color:#555;
background-color:#f0f0f0;
border:1px solid #d3d3d3;
border-left:none;
float:left;cursor:pointer;}

#search-top input#search-button-top:hover{background-color:#e8e8e8;}

/* NAVIGATION */
#navigation{
height:38px;
width:75%;
position:relative;
background-color:#393939;
opacity:1;
box-shadow:0 2px 6px 0 #ccc;
-moz-box-shadow:0 2px 6px 0 #ccc;
margin:0 auto 0;
padding:0 18px 0 18px;
border-bottom:3px solid #87CEEB;}

#navigation li{position:relative;
line-height:38px;
float:left;
list-style:none;
display:inline-block;
padding:0 0 0 0;
margin:0 0 0 0;}

#navigation li a{
padding:0 18px;
color:#fff;
display:block;
font-family:'Oswald',Arial,Helvetica,sans-serif;
font-size:14px;
font-weight:500;
text-align:left;
text-shadow:1px 1px 0 #222;}

#navigation li a.home{
background-position:16px -54px;
width:40px;
padding:0 18;
background-color:red;
text-indent:0px;
overflow:hidden;}

#navigation li a{
border-left:1px solid #222;
border-right:1px solid #444;}

#navigation li:hover a{
background:radial-gradient(#E0FFFF,#87CEFA);
color:#fff;}

#navigation li .sub-nav-wrapper{
display:block;
position:absolute;
z-index:30;
margin-left:0px;}

#navigation li .sub-nav-wrapper .sub-nav{
width:150px;
margin:4px 0 0 0;
padding:0 0 0 0;
background:#fff;
border-top:1px solid #fff;
box-shadow:0 1px 2px rgba(0,0,0,0.35);}

#navigation li:hover .sub-nav-wrapper{display:block;}

#navigation li .sub-nav-wrapper .sub-nav li{
list-style:none;
float:none !important;
line-height:26px;
display:block;
margin:0 0 0 0;
padding:0;
text-align:left;
border-bottom:2px solid white;}

#navigation li .sub-nav-wrapper .sub-nav li:first-child{}

#navigation li .sub-nav-wrapper .sub-nav li:last-child{border:none;}

#navigation li .sub-nav-wrapper .sub-nav li a{
border:none !important;
background:radial-gradient(#E0FFFF, #87CEFA,);
display:block;padding:0 20px;
font-size:12px;
font-weight:small;
color:#4b4b4b !important;
text-shadow:none;
box-shadow:inset 0 0 2px rgba(255,255,255,1.0);
-moz-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);
-webkit-box-shadow:inset 0 0 2px rgba(255,255,255,1.0);}

anime

#navigation li .sub-nav-wrapper .sub-nav li:hover{
background:#eaeaea;
border-bottom:1px solid #ccc;}

#navigation li .sub-nav-wrapper{
pointer-events:none;
opacity:0;
filter:alpha(opacity=0);
top:0;
transition:all 0.35s ease-in-out;
-moz-transition:all 0.35s ease-in-out;
-webkit-transition:all 0.35s ease-in-out;}

#navigation li:hover .sub-nav-wrapper{
pointer-events:auto;
opacity:1;filter:alpha(opacity=100);
top:30px;}

#navigation #search{
position:relative;
font-family:'Oswald',Arial,Helvetica,sans-serif;float:right;
margin:5px 0 5px 10px;}

#navigation li.search{
float:right;
line-height:normal;}

#navigation #search input[type="text"]{
height:28px;
line-height:28px;
background-color:#5b5b5b;
background-position:188px -245px;
border:0 none;
font-size:14px;
font-weight:500;
color:#fff;
width:120px;
padding:0 10px;
-webkit-transition:all 0.7s ease 0 s;
-moz-transition:all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition:all 0.7s ease 0s;}

#navigation #search input#search-button{
-webkit-transition:all 0.7s ease 0 s;
color:#fff;
-moz-transition:all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition:all 0.7s ease 0s;
height:28px;
width:6oij0px;
background-color:red;
background-position:8px -246px;
border:none;
float:right;
cursor:pointer;}

#navigation #search input#search-button:hover{
background-color:#87CEEB;}

#navigation #search input[type="text"]:focus{
background-color:#fff;
text-shadow:none !important;
outline:none;color:#555;}

</style>

Tag HTML nya

<div class="container">
<ul id='navigation'>
<li class='current'>
<a class='home' href='/'>Home</a>
</li>
<li>
<a href='#link_Laman_1'>Laman 1</a>
<div class='sub-nav-wrapper'>
<ul class='sub-nav'>
<li>
<a href='#Link_Submenu'>Submenu 1</a></li>
<li>
<a href='#Link_Submenu'>Submenu 2</a></li>
<li>
<a href='#Link_Submenu'>Submenu 3</a></li>
</ul>
</div>
</li>
<li>
<a href='#Link_Laman_2'>Laman 2</a>
<div class='sub-nav-wrapper'>
<ul class='sub-nav'>
<li>
<a href='#Link_Submenu'>Submenu 1</a></li>
<li>
<a href='#Link_Submenu'>Submenu 2</a></li>
<li>
<a href='#Link_Submenu'>Submenu 3</a></li>
</ul>
</div>
</li>
<li>
<a href='#Link_Laman_3'>Laman 3</a>
<div class='sub-nav-wrapper'>
<ul class='sub-nav'>
<li>
<a href='#Link_Submenu'>Submenu 1</a></li>
<li>
<a href='#Link_Submenu'>Submenu 2</a></li>
<li>
<a href='#Link_Submenu'>Submenu 3</a></li>
</ul>
</div>
</li>
<li>
<a href='#Link_Laman_4'>Laman 4</a>
<div class='sub-nav-wrapper'>
<ul class='sub-nav'>
<li>
<a href='#Link_Submenu'>Submenu 1</a></li>
<li>
<a href='#Link_Submenu'>Submenu 2</a></li>
<li>
<a href='#Link_Submenu'>Submenu 3</a></li>
</ul>
</div>
</li>
<li>
<a href='Link_Laman 5'>Laman 5</a>
<div class='sub-nav-wrapper'>
<ul class='sub-nav'>
<li>
<a href='#Link_Submenu'>Submenu 1</a></li>
<li>
<a href='#Link_Submenu'>Submenu 2</a></li>
<li>
<a href='#Link_Submenu'>Submenu 3</a></li>
</ul>
</div>
</li>
</li>
<li class='search'>
<form action='/search' id='search' method='get'>
<input name='q' placeholder='Search...' size='50' type='text'/><input id='search-button' type='submit' value='Go'/></form>
</li>
</ul>

File nya dapat dilihat hasilnya dan dapat diunduh berikut ini :

Pages

Menu dengan Search Button

Menu dengan Search Button

Tag CSS nya

Tag HTML nya

Demo Unduh

About Me