ΑΡΧΙΚΗ ΚΑΤΑΣΚΕΥΗ Bloggs ΚΩΔΙΚΑΣ html JavaScript ΕΙΣΑΓΩΓΗ ManiacΑΝΑΛΥΣΗ Site ΕΙΔΗΣΕΩΝ GadgetManiac ΓΕΝΙΚΑ

Σάββατο, 6 Απριλίου 2013

ΣΥΝΔΙΑΣΜΟΣ HTML ΚΑΙ CSS ΚΩΔΙΚΑ ΓΙΑ ΜΕΝΟΥ ΣΕ ΜΠΛΟΚ



   Τον HTML θα τον βάλετε στη πλαϊνή σας στήλη.
 Εάν το βάλετε στη δεξιά θα βάλετε το κώδικα κάτω από τη φράση  <div id='sidebar-wrapper'>  η <div id='sidebar-wrapper-right'>
αν το βάλετε στην αριστερή, θα το βάλετε κάτω από τη φράση <div id='sidebar-wrapper-left'>.Βέβαια μπορείτε να το προσθέσετε σαν Gadget στη πλαϊνή σας στήλη.

  Τον CSS κώδικα θα τον τοποθετήσουμε πριν  τον κώδικα : ]]></b:skin> (Αναζητώ με το CTRL+F) μέσα στον HTML.

         1.   Blue Impression Drop Down Menu

HTML CODE:

<ul class="menu">
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>
<ul class="sub">
<li><a href="#">Sample Menu This is some longer text</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>
</ul>



   CSS CODE:

.bg {background: url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif);}
.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsqYv9n9TI/AAAAAAAAAIk/oiiHv79iBCk/s1600/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu li.top {display:block; float:left; position:relative;}
.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsqd0O5eNI/AAAAAAAAAIw/qhsKMaaJL20/s1600/down.gif) no-repeat right top;}
.menu li a.top_link:hover {color:#000; background: url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat right top;}
.menu li a.top_link:hover span.down {background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqbaw12UI/AAAAAAAAAIs/u7l_QWB3Ruc/s1600/button4a.gif) no-repeat right top;}
.menu li:hover > a.top_link {color:#000; background: url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQsqZxrxmtI/AAAAAAAAAIo/8O6ylsZyRTQ/s1600/button4.gif) no-repeat right top;}
.menu li:hover > a.top_link span.down {background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqbaw12UI/AAAAAAAAAIs/u7l_QWB3Ruc/s1600/button4a.gif) no-repeat right top;}
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
.menu a:hover {visibility:visible;}
.menu li:hover {position:relative; z-index:200;}
.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #95d2ee; white-space:nowrap; width:200px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu :hover ul.sub li a.fly {background:#fff url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsqVzs-dBI/AAAAAAAAAIc/nCJLoz72b2Q/s1600/arrow.gif) 80px 7px no-repeat;}
.menu :hover ul.sub li a:hover {background:#95d2ee; color:#fff;}
.menu :hover ul.sub li a.fly:hover {background:#95d2ee url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqXRNVRmI/AAAAAAAAAIg/d_73a7oZpH4/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:#95d2ee url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsqXRNVRmI/AAAAAAAAAIg/d_73a7oZpH4/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}



2.   Blue Center Drop Bar

   HTML CODE:

<div class="nav">
<div class="table">
<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>

<ul class="select"><li><a href="#"><b>Sample Menu</b></a>
<div class="select_sub">
<ul class="sub">
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<br />


  CSS CODE:

.nav {height:35px;
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQspKEXsD1I/AAAAAAAAAIU/XP4RobAgtGk/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}
.nav .table {
display:table;
margin:0 auto;
}
.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;




            3   Blue Dawn Drop Down


HTML CODE:

<div class="wrapper1">

<div class="wrapper">

<div class="nav-wrapper">

<div class="nav-left"></div>

<div class="nav">

<ul id="navigation">

<li class="active">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Home</span>

<span class="menu-right"></span>

</a>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Blog</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Archives</a>

</li>

<li>

<a href="#">Categories</a>

</li>

<li>

<a href="#">Top-rated Posts</a>

</li>

<li>

<a href="#">Most-viewed Entries</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Development</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Wordpress Themes</a>

</li>

<li>

<a href="#">Wordpress Plugins</a>

</li>

<li>

<a href="#">Mac OS X</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Tutorials</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Photoshop</a>

</li>

<li>

<a href="#">Illustrator</a>

</li>

<li>

<a href="#">Css, Html</a>

</li>

<li>

<a href="#">Post Your Tutorial!</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Gallery</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Personal Photos</a>

</li>

<li>

<a href="#">My Friends</a>

</li>

<li>

<a href="#">Tech</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Portfolio</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">My Works</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="last">

<a href="">

<span class="menu-left"></span>

<span class="menu-mid">Contact</span>

<span class="menu-right"></span>

</a>

</li>

</ul>

</div>

<div class="nav-right"></div>

</div>

<div class="content">

<p>&nbsp;</p>

<p>&nbsp;</p>



</div>

<div class="content-bottom"></div>

</div>

</div>


  CSS CODE:

.wrapper1{

color: #44433f;

font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;

margin: 0;

padding: 4px 0 0;

}

.wrapper1 a{

color: #E5F2FB;

text-decoration: none;

}

.wrapper1 a:hover {

color: #09548B;

}

.wrapper1 p {

margin: 0 0 17px;

padding: 0;

line-height: 18px;

}

.wrapper {

/*width: 710px;*/

margin: 20px auto;

}

.nav {

background: #fff url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmFxQxnOI/AAAAAAAAAHo/WeNb4h2lTcY/s1600/nav_bg.png) repeat-x;

float: left;

}

.nev-wrapper {

clear: both;

float: left;

}

.nav-left {

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmHgvXrfI/AAAAAAAAAHs/0C36haanf_o/s1600/nav_left.png) no-repeat top left;

float: left;

width: 11px;

height: 41px;

}

.nav-right {

background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmIzag1WI/AAAAAAAAAHw/qNqgaojq4OI/s1600/nav_right.png) no-repeat top right;

float: left;

width: 11px;

height: 41px;

}

.nav ul {

/*width: 648px;*/

height: 38px;

float: left;

margin: 0;

padding-top: 3px;

list-style: none;

font-size: 15px;

}

.nav li {

float: left;

padding: 0 7px;

background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmP8wgFmI/AAAAAAAAAIA/wdf4DZhsFKg/s1600/split.png) no-repeat right center;

position: relative;

z-index: 1;

}

.nav li.last {

background:none;

}

.nav li:hover {

z-index:2;

}

.nav li a {

display: block;

line-height: 38px;

overflow: hidden;

float: left;

}

a .menu-left {

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsl3yDJRkI/AAAAAAAAAHQ/hZkoiBamxso/s1600/menu_left.gif) no-repeat left top;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-mid {

background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsl7c8ppBI/AAAAAAAAAHY/hxR8ObxBYmo/s1600/menu_mid.gif) repeat-x top left;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-right {

background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmCJ3D5iI/AAAAAAAAAHg/0y7-Wpz4C2o/s1600/menu_right.gif) no-repeat top left;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

.nav li a:hover .menu-left,

.nav li.active a .menu-left,

.nav li:hover a .menu-left,

.nav li a:hover .menu-mid,

.nav li.active a .menu-mid,

.nav li:hover a .menu-mid,

.nav li a:hover .menu-right,

.nav li.active a .menu-right,

.nav li:hover a .menu-right {

background-position: 0 -37px;

line-height: 35px;

}

.nav li a:hover,

.nav li.active a,

.nav li.hover a,

.nav li:hover a {

color: #09548B;

}

.nav li:hover .sub,

.nav li.hover .sub {

display:block;

}

.nav li .sub {

display: none;

position: absolute;

top: 27px;

left: 6px;

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmUJr-yhI/AAAAAAAAAIM/OihvjAeTyG8/s1600/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmRpDHDsI/AAAAAAAAAIE/ADndeR5TGu8/s1600/submenu_bg.png) repeat-y;

width: 162px;

height: auto;

margin: 0;

padding: 0 12px 10px;

list-style: none;

font-size: 14px;

}



.nav li:hover li,

.nav li.active li {

width: 100%;

padding: 1px 0 2px;

border-bottom: 1px #C1D9F0 dashed;

background: none !important;

}

.nav li:hover li a,

.nav li.active li a {

color: #09548B;

background: none !important;

line-height: normal;

width: 156px;

padding: 8px 3px 3px;

text-indent: 1px;

}

.nav li:hover li a:hover,

.nav li.active li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/*IE*/

.nav li li a:hover,

.nav li li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/**/

.nav .btm-bg {

background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmS3dJfYI/AAAAAAAAAII/h8j3-QE6ElE/s1600/submenu_bottom.png) no-repeat;

width: 205px;

height: 9px;

overflow: hidden;

clear: both;

}

.content {

width: 670px;

background: transparent url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQslwVgdWcI/AAAAAAAAAHA/hPtWaiguCKQ/s1600/content_bg.png) repeat-y;

float: left;

padding: 10px 20px;

}

.content h1 {

color: #333;

font-weight: 400;

text-transform: uppercase;

font-size: 18px;

border-bottom: 1px dashed #C1D9F0;

}

.content h2 {

font-weight: 400;

text-transform: uppercase;

font-size: 14px;

padding-left: 10px;

margin-bottom: -5px;

}

.content p {

padding: 0 15px;

text-align: justify;

}

.content-bottom {

width: 710px;

background: transparent url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQslyLtUh4I/AAAAAAAAAHE/KjmSaXhHWuw/s1600/content_bottom.png) no-repeat;

height: 13px;

float: left;

}


     
4.   Simple Black Drop Down Menus
HTML CODE:

<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>
CSS CODE:



div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
5.  Simple Blue Drop Down Menus

   
HTML CODE:

<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>
CSS CODE:



div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
6.   Simple Green Drop Down Menus
HTML CODE:

<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>
CSS CODE:

div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
7 .     Blue Tabbed Drop Down


 
  HTML CODE:

<div class="menu">

<ul>

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

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>
  CSS CODE:

.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font-family:verdana,geneva,arial,helvetica,sans-serif;

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQtAu6UjDEI/AAAAAAAAAJo/bk_C9T7IF54/s1600/menu-bg.gif) top left repeat-x;

height:43px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

}

.menu li a{

color:#666666;

display:block;

font-weight:bold;

line-height:43px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover{

color:#000000;

text-decoration:none;

}

.menu li ul{

background:#e0e0e0;

border-left:2px solid #0079b2;

border-right:2px solid #0079b2;

border-bottom:2px solid #0079b2;

display:none;

height:auto;

filter:alpha(opacity=95);

opacity:0.95;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

display:block;

float:none;

width:225px;

}

.menu li ul a{

display:block;

font-size:12px;

font-style:normal;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover{

background:#949494;

color:#000000;

opacity:1.0;

filter:alpha(opacity=100);

}

.menu p{

clear:left;

}

.menu #current{

background:url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQtAtX3PdII/AAAAAAAAAJk/syUHkWP9X6Q/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.