Stylish Mega Menu use CSS3

Hasil membaca-baca dari artikel make animated search box use CSS3, terdapat sebuah web link di dalam jaringan CSS radar yakni WeebTutorials. Setelah membabat postingan tutorial yang ada disana, Beben Koben si bloglang anu ganteng kalem tea terpikat dengan 2 tut's menu full stylish b-) Selain itu disana cocok banget bagi kita para newbie untuk menimba ilmu buat nambah² gitooo. Koben kepincut dengan menu tersebut karena unik dan yang lebih menarik full CSS bro :-bd Sorot pada title menu dibawah berikut...

Demo Horizontal drop-down menu using CSS3

Kode CSS

#navBar1{
float: left;
width: 100%;
border: solid 2px #555;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: -moz-linear-gradient(bottom,#BDC7FF, #89F);
background: -webkit-gradient(linear,left bottom, left top, from(#89F), to(#BDC7FF));
-moz-box-shadow: 1px 3px 3px #555;
}
#navBar1 ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
#navBar1 ul li {
display: block;
float: left;
padding-top: 9px;
padding-bottom: 9px;
}
#navBar1 ul li span {
display: block;
}
#navBar1 ul li span a {
border-left: solid #777 thin;
}
.headerList1 a {
border-right: solid #777 thin;
}
#navBar1 ul li a {
display: block;
padding: 5px;
padding-left: 13px;
padding-right: 13px;
color: #eee;
text-decoration: none;
font-family: Tahoma, Geneva, sans-serif;
font-size: 95%;
}
#navBar1 ul li a:hover {
color: #333;
text-decoration: underline;
}
#navBar1 ul ul {
border-right: solid #505e58 thin;
position: absolute;
top: 47px;
left: 2500px;
background: #CCC;
width: auto;
border: thin solid #57F;
font-size: 70%;
display: none;
}
#navBar1 ul li:hover ul {
position: absolute;
left: 60px;
display: block;
}
#navBar1 ul ul li {
padding: 0;
padding-top: 3px;
padding-bottom: 2px;
}
#navBar1 ul ul li a {
border: none;
color: #555;
}

HTML Coded

<div id="navBar1">
<ul>

<li class="headerList1"><a href="#">Home</a>
</li>

<li class="headerList1"><span><a href="#">TITLE1</a></span>
<ul>
<li><a href="#">Sub Title1</a></li>
<li><a href="#">Sub Title1</a></li>
<li><a href="#">Sub Title1</a></li>
<li><a href="#">Sub Title1</a></li>
<li><a href="#">Sub Title1</a></li>
</ul>
</li>

<li class="headerList1"><span><a href="#">TITLE2</a></span>
<ul>
<li><a href="#">Sub Title2</a></li>
<li><a href="#">Sub Title2</a></li>
<li><a href="#">Sub Title2</a></li>
<li><a href="#">Sub Title2</a></li>
<li><a href="#">Sub Title2</a></li>
</ul>
</li>

<li class="headerList1"><span><a href="#">TITLE3</a></span>
<ul>
<li><a href="#">Sub Title3</a></li>
<li><a href="#">Sub Title3</a></li>
<li><a href="#">Sub Title3</a></li>
<li><a href="#">Sub Title3</a></li>
<li><a href="#">Sub Title3</a></li>
</ul>
</li>

<li><span><a href="#">TITLE4</a></span>
<ul>
<li><a href="#">Sub Title4</a></li>
<li><a href="#">Sub Title4</a></li>
<li><a href="#">Sub Title4</a></li>
<li><a href="#">Sub Title4</a></li>
<li><a href="#">Sub Title4</a></li>
</ul>
</li>

</ul>
</div>

Do you want try it menu full style. Satu menu lagi yaitu stylish CSS3 mega drop down navigation menu! Yuk kita mulai

Jikalau sobat memang tergiur memasang mega menu berikut, maka sobat tidak usah lagi membuat kotak buat kontak, share dan about me :D

demo CSS3 mega menu

CSS Code

#navWrap1 {
border: thin #2e363f solid;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
width: 1000px;
margin: 0 auto;
}
#navWrap2 {
border: thin #a9c2dc solid;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #678;
padding: 0px 20px;
}

/* Styling the list */

#navWrap2 > ul {
list-style: none;
padding: 0;
margin: 0;
padding-top: 5px;
font-family: Tahoma, Geneva, sans-serif;
}
#navWrap2 > ul > li {
float: left;
position: relative;
}
#navWrap2 > ul > li > a {
padding: 10px 20px 15px 20px;
text-decoration: none;
color: #456;
text-shadow: #8194a8 1px 1px 0px;
font-weight: bold;
font-size: 17px;
display: block;
margin-left: 2px;
margin-right: 2px;
margin-top: 2px;
}

/* Styling the hover effect */

#navWrap2 > ul > li:hover{
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#678', endColorstr='#EEE'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#678), to(#EEE)); /* for webkit browsers */
background: -moz-linear-gradient(top, #678, #EEE); /* for firefox 3.6+ */
border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-moz-border-radius: 10px 10px 0px 0px;
border-top: 2px solid #cac9c9;
border-left: 2px solid #cac9c9;
border-right: 2px solid #cac9c9;
}
#navWrap2 > ul > li:hover > a {
margin: 0;
color: #CCC;
text-shadow: #555 1px 1px 0px;
}

/* Styling the nested list */

#navWrap2 ul li:hover ul {
display: block;
-moz-box-shadow: 3px 3px 4px #a7a7a7;
border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
-moz-border-radius: 0px 10px 10px 10px;
}
#navWrap2 ul ul {
display: none;
position: absolute;
left: -2px;
border-bottom: 2px solid #CCC;
border-left: 2px solid #CCC;
border-right: 2px solid #CCC;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#EEE', endColorstr='#CCC'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#CCC)); /* for webkit browsers */
background: -moz-linear-gradient(top, #EEE, #CCC); /* for firefox 3.6+ */
width: 420px;
padding: 20px;
}

/* Styling the contents of nested list */

.navListFloat ol {
padding: 0;
margin: 0;
}
#navWrap2 ul ul li {
list-style: none;
}
#navWrap2 ul ul li a {
text-decoration: none;
color: #777;
padding: 4px;
}
#navWrap2 ul ul li a:hover {
color: #456;
}
#navWrap2 ul ul p {
font-family: Tahoma, Geneva, sans-serif;
color: #414141;
font-size: 14px;
}
#navWrap2 ul ul p b {
color: #414141;
font-size: 16px;
}
.navListFloat {
float: left;
width: 106px;
margin: 0px 17px 17px 17px;
}
.navListFloat li {
font-size: 13px;
}
.newsletter > input {
margin-top: 44px;
}
.newsletter div {
float: left;
margin-right: 25px;
}

/* Styling the search form */

.search {
float: right;
}
.searchBox {
float: left;
margin-top: 12px;
height: 23px;
border-top: thin solid #3c444c;
border-left: thin solid #3c444c;
border-right: thin solid white;
border-bottom: thin solid white;
background: #e9e9e9;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #555;
padding: 0 0 1px 3px;
}
.searchIMG {
float: left;
margin-top: 10px;
margin-left: -5px;
}
img {
margin-top: 17px;
border: none;
}
.clear {display: block;clear: both }

Kode HTML

<div id="navWrap1">
<div id="navWrap2">

<ul>
<li>
<a href="#">Home</a>
<ul>
<li>
<p style="font-weight:bold;color:#333">Welcome to ABC.com</p>
<img src="http://link-image-navLine.png" height="2" width="418" alt="line"/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</li>
</ul>
</li>

<li>
<a href="#"> About</a>
<ul>
<li>
<p style="font-weight:bold;color:#333">About us</p>
<img src="http://link-image-navLine.png" height="2" width="418" alt="line"/>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</li>
</ul>
</li>

<li>
<a href="#">Contact</a>
<ul>
<li>
<p style="font-weight:bold;color:#333">Contact</p>
<img src="link-image-navLine.png" height="2" width="418" alt="line"/>
<form method="post" action="#">
<p>Name</p>
<input type="text" name="Name"/>
<p>Email :</p>
<input type="text" name="Email"/>
<p>Comments :</p>
<textarea name="comments" cols="40" rows="5">
Enter your message here!
</textarea>
<br/>
<br/>
<input type="submit" value="Submit" />
</form>
</li>
</ul>

</li>
<li><a href="#">Portfolio</a>
<ul>
<li>
<p style="font-weight:bold;color:#333">Portfolio</p>
<img src="link-image-navLine.png" height="2" width="418" alt="line"/>
<div class="navListFloat">
<p>Development</p>
<ol>
<li><a href="#">TutSite</a></li>
<li><a href="#">BidBay</a></li>
<li><a href="#">Evideo</a></li>
<li><a href="#">MusicBay</a></li>
<li><a href="#">Network 2.0</a></li>
</ol>

</div>

<div class="navListFloat">
<p>Web Design</p>
<ol>
<li><a href="#">Playsite</a></li>
<li><a href="#">Gamer Station</a></li>
<li><a href="#">Musix</a></li>
<li><a href="#">xPress.com</a></li>
<li><a href="#">E Logo</a></li>
</ol>
</div>

<div class="navListFloat">
<p> Other Projects</p>
<ol>
<li><a href="#">Incognito</a></li>
<li><a href="#">ItSells.com</a></li>
<li><a href="#">Musix</a></li>
<li><a href="#">xPress.com</a></li>
<li><a href="#">E Logo</a></li>
</ol>
</div>

</li>
</ul>
</li>

<li ><a href="#">Social</a>
<ul>
<li>
<p style="font-weight:bold;color:#333">Social</p>
<img src="http://link-image-navLine.png" height="2" width="418" alt="line"/>
<form class="newsletter" method="post" action="#">
<p><b>Join newsletter</b></p>
<div>
<p>Name</p>
<input type="text" name="Name"/>
</div>
<div>
<p>Email :</p>
<input type="text" name="Email"/>
</div>
<input type="submit" value="Join" />
</form>
<img src="http://link-image-navLine.png" height="2" width="418" alt="line"/>
<a href="#"><img src="http://link-image-rss.png" alt="RSS"/></a>
<a href="#"><img src="http://link-image-twitter.png" alt="twit"/></a>
<a href="#"><img src="http://link-image-facebook.png" alt="face"/></a>
<a href="#"><img src="http://link-image-stumble.png" alt="su"/></a>
<a href="#"><img src="http://link-image-linkedin.png" alt="in"/></a>
</li>
</ul>
</li>
</ul>

<form class="search" method="post" action="#">
<input type="text" name="search" class="searchBox"/>
<input type="image" src="http://link-image-searchBtn.png" class="searchIMG" />
</form>
<span class="clear"></span>

</div>
</div>

Gantikan link image dengan link hostingan image, disini silahkan ambil bumbu CSS 3 mega menu.
DONE :)
1. CSS3 animated dropdown menu.
2. Sliding Menu Buttons Using CSS3 & jQuery

Cool Sprites overlapped CSS menu using CSS Sprites

Pure CSS DropDown Menu using :target pseudo class

CSS menu, 180 scripts, Plugins and Freebies

Create a Stylish Menu with CSS3 Transitions

Happy menu \m/