Trik Komputer: Stylish Mega Menu use CSS3

Hasil membaca-baca dari artikel , terdapat sebuah web link di dalam jaringan CSS radar yakni . 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 . Satu menu lagi yaitu ! 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 .
DONE :)
1. .
2.

Trik Komputer

Selasa, 15 November 2011

Stylish Mega Menu use CSS3

Demo Horizontal drop-down menu using CSS3

Kode CSS

HTML Coded

CSS Code

Kode HTML

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

Tidak ada komentar:

Posting Komentar