Myscript2010: Ada beberapa macam CSS Horizontal Menus

Ada beberapa macam
model CSS Horizontal Menus, Fungsinya adalah agar dapat memudahkan pengunjung membaca artikel diarea postingan blog. dan juga dapat meminimalisasikan halaman.
Dengan berbagai macam model kita dapat memilih adanya CSS Horizontal Menus sesuai dengan
desain tampilan blog. Dibawah ini tersedia Code CSS Menus

untuk dijadikan pilihan dan diterapkan kedalam sebuah ruangan gadged

CSS3 Gradient Menu Buttons

<style type="text/css">
.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}

.gradientbuttons li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}

.gradientbuttons li a:hover{
color: lightyellow;
}

.redtheme li a{
font-size:18px;
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); 
}

.greentheme li a{
font-size:12px;
background: green;
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690)); 
}

.blacktheme li a{
font-size:16px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); 
}

.orangetheme li a{
font-size:14px;
background: #e55e3f;
background: -moz-linear-gradient(center top, #ecad9a, #e5937c 25%, #cf4c2a 45%, #e5937c 85%, #ecad9a);
background: -webkit-gradient(linear, center top, center bottom, from(#ecad9a), color-stop(25%, #e5937c), color-stop(45%, #cf4c2a), color-stop(85%, #e5937c), to(#ecad9a)); 
}

</style> <div class="gradientbuttons">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li>

CSS3 Shadow Block Menu

<style type="text/css">

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 100%;
}

.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 1px 0; /* Show only top and bottom border for main menu container */
padding: 0;
margin: 0;
overflow: hidden;
}

.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}

.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB; /*right border between menu items*/
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}


.shadowblockmenu li:nth-of-type(1) a{ /* Extra style for first menu link */
border-left: 1px solid #BBB; /* add border to left side of first menu link */
padding-left:25px;
background: url(media/onebit_home.png) 1px center no-repeat; /* Add icon */
}

.shadowblockmenu li:nth-of-type(2) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(media/onebit_bulb.png) 1px center no-repeat; /* Add icon */
}

.shadowblockmenu ul li a:hover{
color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); /* Add 2 inset shadows to each menu item  */
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}

</style> <div class="shadowblockmenu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li>
</ul>
</div>

Half moon tab menu

<style type="text/css">
<style type="text/css">

.halfmoon{
margin-bottom: 1em;
}

.halfmoon ul{
padding: 3px 9px 2px 5px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
border-bottom: 1px solid #fff000;
}

.halfmoon li{
display: inline;
margin: 0;
}

.halfmoon li a{
text-decoration: none;
padding: 3px 9px 2px 5px;
margin: 0;
margin-right: 1px; /*distance between each tab*/
border-left: 1px solid #fff;
color: aqua;
font-size: 13px;
background: #808080 url(media/tabright.gif) top right no-repeat;
}

.halfmoon li a:visited{
color: aqua;
}

.halfmoon li a:hover{
background-color: #CDDADA;
color: navy;
}

</style>
<div class="halfmoon">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU 1</a></li>
<li class="selected"><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
</ul>
</div>

CSS3 Semi Opaque Menu

<style type="text/css">

div.bottombar{ /* bar that runs across the bottom of the menu */
height: 10px;
background: #1a1109;
}

ul.semiopaquemenu{ /* main menu UL */
font: bold 14px Georgia ;
width: 100%;
background: red;
padding: 11px 0 8px 0; /* padding of the 4 sides of the menu */
margin: 0;
text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */
}

ul.semiopaquemenu li{
display: inline;
}

ul.semiopaquemenu li a{
color:#444;
padding: 6px 8px 6px 8px; /* padding of the 4 sides of each menu link */
margin-right: 15px; /* spacing between each menu link */
text-decoration: none;
}

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: blue;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiweVje4sCmzqcGAeavsuSCLvYNBufAG13wpTMV0_qEgB64b5BJ-iV4BfrSdFs5pyHoLQ-xELDUDm89GRUnE4F89nBydjfeMc9TOsyT9SsPV-zxmz9X-BaDvEcuZIXR1lT4zHwf7MvZGdA/s1600-r/gradient-background-3-1280x800.jpg); /* IE9+ SVG equivalent  of linear gradients */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%); /* fade from white (0.82 opacty) to 0.16 opacity */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 12px; /* large padding to get menu item to protrude upwards */
padding-bottom: 20px; /* large padding to get menu item to protrude downwards */
}

</style>
<ul class="semiopaquemenu">
<li><a href="#">HOME</a></li>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li>
</ul>
<div class="bottombar">
</div>

CSS Tab Menu

<style type="text/css">
#top{margin:auto;padding: 0;width: 100%;background:#eeeeee;border-bottom:1px solid #fff;}
#top-wrap{margin:auto;padding: 0;width: 950px;background:#fafafa;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#808080;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#dad; color:#000000;}
#navbar-iframe {display: none !important;}

</style> <div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='#' title='Home'>HOME</a></li>
<li><a href='#' title='Menu 1'>MENU 1</a></li>
<li><a href='#' title='Menu 2'>MENU 2</a></li>
<li><a href='#' title='Menu 3'>MENU 3</a></li>
<li><a href='#' title='Menu 4'>MENU 4</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

CSS Menu fixed header

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/> <style> 
#ks-meno{
width:100%;
height:45px;
display:block;
padding:0;
margin:0 0 22px 0;
z-index:100;
top:0px;
left:0px;
position:fixed;
box-shadow:2px 2px 5px  #444444;
-moz-box-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
background:#181818;
}

#ks-mano1{
  float:left;
  width:700px;
  height:40px;
  display:block;
  padding:0;
  margin-left:40px;
}

#ks-mano1 ul{
  float:left;
  margin:0;
  padding:0;
 border:#181818 1px hidden;

}

#ks-mano1 li{
  float:left;
  list-style:none;
  line-height:37px;
  margin:0;
  padding:0
  background:#181818;
  border:#181818 1px hidden;
 }

#ks-mano1 li a, #ks-mano1 li a:link{
  color:#fff;
  display:block;
  margin:0;
  font-family: 'Droid Serif', serif;
  font-size:16px;
  padding:10px;
  text-decoration:none;
 border:#181818 1px hidden;  line-height:25px;
}

#ks-mano1 li a:hover, #ks-mano1 li a:active, #ks-mano1 .current_page_item a  {
  color:#fff;
  padding:10px;
  background:#6CF;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease; border:#6CF 1px hidden;
}
#ks-mano1 li li a, #ks-mano1 li li a:link, #ks-mano1 li li a:visited{
  font-size: 12px;
  background:#181818;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
  border:#181818 1px solid;
}

#ks-mano1 li li a:hover, #ks-mano1 li li a:active {
  color: #fff;border:#6CF 1px solid;
  background:#6CF;
  -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
}

#ks-mano1 li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px
}

#ks-mano1 li:hover ul, #ks-mano1 li li:hover ul, #ks-mano1 li li li:hover ul, #ks-mano1 li.sfhover ul, #topks-mano1 li li.sfhover ul, #topks-mano1 li li li.sfhover ul{
  left:auto
}

#ks-mano1 li:hover, #ks-mano1 li.sfhover{
  position:static;
}

#ks-ico {
  float:right;
  width:220px;
  padding:0px 0px ;
   }
#ks-ico img
{
margin-left:6px;
margin-top:10px;
height:28px; width:28px;
border:none;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
}
#ks-ico img:hover
{
    opacity:.8;
        -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
}
/*crawlist.net CSS ends*/
</style> <!--crawlist.net nev starts-->   <div id='ks-meno'>
<div id='ks-mano1'>
<ul><!--menu-->
<li><a href='#'>HOME</a></li>
<!--menu-->            <!--menu-->
<li><a href='#'>MENU 1</a><!--menu-->              <ul><!--submenu-->
<li><a href='#'>MENU 1a</a></li>
<li><a href='#'>MENU 1b</a></li>
<li><a href='#'>MENU 1c</a></li>
<li><a href='#'>MENU 1d</a></li>
<li><a href='#'>MENU 1e</a></li>
<!--submenu-->                </ul>
</li>
<!--menu-->
<li><a href='#'>MENU 2</a><!--menu-->                <ul><!--submenu-->
<li><a href='#'>MENU 2a</a></li>
<li><a href='#'>MENU 2b</a></li>
<li><a href='#'>MENU 2c</a></li>
<li><a href='#'>MENU 2d</a></li>
<!--submenu-->                </ul>
</li>
<!--menu-->
<li><a href='#'>MENU 3</a></li>
<!--menu-->              <!--menu-->
<li><a href='#'>MENU 4</a></li>
<!--menu-->          </ul>
</div>
<div id='ks-ico'>
<a href='#' target='_blank' title="Join Us on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVny88H2G957Iia4R0lVC36fBJkMhCMnzX0ftJ1nX7oZXFLy9AD3uRHxE3KrThyZrlh1B66LIIcbhEcXAk2XZwEj4oyqvU8SW5QcpYhg5uJFT5578fXhPtD2BZQmfnlbKf6PrpLdiVIC3M/s1600/facebook.png"/></a>  <a href='#' target='_blank' title="Follow us on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO0cXt4eyBKdxoKlpzZM-o-4jYYOENxn_x86GYP2hmlqSUXqe9hZz5fnd7vKYHs7P-DYxqk1fJjEDLuSl-NjmhNBhf0mRYio_Jo0ugocBXgDB1NAmjb9eFxI24r-vyO7krsFe7GRDsSfUF/s1600/twitter.png"/></a>  <a href='#' target='_blank' title="Add Us to Circles"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6aZK_VoVu_RWbgPDvjlhbbCEzWsCXdSazNRYe1brmIg6CZVolbU1aZG8q__uc8Zzce14fBcczGlMUZ0nSVWe7IDpP0444993MC9RCpT1BLbsN63TQrLHDtLwmyYJscO7fHcBYr_MibZrl/s1600/google_plus.png"/></a>  <a href='#' target='_blank' title="Add Us on Linked in"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCyk9N2oD2Lx5HHV25Sbjh_Hl2PXQ7-y4Ai4gOC_z7vqUFtO0DDdID-KWxz-ju8yclGNXHyxtUYWUwjDW-eNIKRR_z2AfjJNni-V1mMeJmxe16vLvxPVgITkIG7bOMkbAtNIXC5E7x6z-v/s1600/linkedin.png"/></a>     </div>

All Sources Edited by. Myscript2010

Test Script untuk melihat hasil

Myscript2010

Menu

Menu Tab

Pages

Ada beberapa macam CSS Horizontal Menus

Random Posts

Popular Posts

Blog Archive

M2010