Colorful horizontal-menu 2

Web sitenizi süsleyecek  4  farklı  renkte  hazırlanmış Css3 menü örneği.  Daha önceleri  anlattığımız bir yazımızda Seçilebilir Link Özellikli diye  bir  konu anlatmıştık. Şimdiki menümüz özellik olarak hemen hemen aynı. Her  ayrı sayfa  için seçili  olarak tutulabilen özelliğe  sahip. Diğer  örnekte  her  başlık için ayrı  ayrı  sayfa  ekleyip  menü başlığının nasıl seçili olarak tutulabileceğini  anlatmıştık.  bu seferki  örneğin demolarını  tek bir  sayfa  içerisinde  sıraladık. Seçili  olarak  duran başlıkları  resimde olduğu gibi  demo sayfasındada görebilirsiniz.

 Kullanım

• Css :

<style type="text/css">
#menu {
	float:left;
}
ul#firstmenu li {
	display:inline;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.8em;
	padding-top:40px;
}
ul#firstmenu a
{
	padding:8px 8px 8px 8px;
	text-decoration:none;
	font-weight:bold;
	color:#83129E;
}
ul#firstmenu a.current {
     background-color:#DDDDDD;
}
ul#firstmenu a:hover, ul#firstmenu a.current {
	-moz-border-radius:0 20px 20px 20px;
	background-image:url("menu.jpg");
	color:#FFFFFF;
}

ul#secondmenu li {
	display:inline;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.8em;
	padding-top:40px;
}
ul#secondmenu a
{
	padding:8px 8px 8px 8px;
	text-decoration:none;
	font-weight:bold;
	color:#b12ad4;
}
ul#secondmenu a.current {
     background-color:#B0E137;
}
ul#secondmenu a:hover, ul#secondmenu a.current {
	-moz-border-radius:0 20px 20px 20px;
	background-image:url("menu2.jpg");
	color:#b12ad4;
}

ul#thirdmenu li {
	display:inline;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.8em;
	padding-top:40px;
}
ul#thirdmenu a
{
	padding:8px 8px 8px 8px;
	text-decoration:none;
	font-weight:bold;
	color:#E227B6;
}
ul#thirdmenu a.current {
     background-color:#B0E137;
}
ul#thirdmenu a:hover, ul#thirdmenu a.current {
	-moz-border-radius:0 20px 20px 20px;
	background-image:url("menu3.jpg");
	color:white;
}

ul#fourthmenu li {
	display:inline;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.8em;
	padding-top:40px;
}
ul#fourthmenu a
{
	padding:8px 8px 8px 8px;
	text-decoration:none;
	font-weight:bold;
	color:black;
}
ul#fourthmenu a.current {
     background-color:#B0E137;
}
ul#fourthmenu a:hover, ul#fourthmenu a.current {
	-moz-border-radius:0 20px 20px 20px;
	background-image:url("menu4.jpg");
	color:black;
}

</style>

•  Html :

<div id="menu">
    <ul id="firstmenu">
        <li><a title="" href="#all" class="current">Home</a></li>
        <li><a rel="graphicdesign" title="" href="#">Projects</a></li>
        <li><a rel="prints" title="" href="#">Services</a></li>
        <li><a rel="pweb" title="" href="#">About Us</a></li>
        <li><a rel="experiments" title="" href="#">Tutorials</a></li>
        <li><a rel="photography" title="" href="#">Contact Us</a></li>
    </ul>
</div>

<div id="menu">
    <ul id="secondmenu">
        <li><a title="" href="#all">Home</a></li>
        <li><a rel="graphicdesign" title="" href="#" class="current">Projects</a></li>
        <li><a rel="prints" title="" href="#">Services</a></li>
        <li><a rel="pweb" title="" href="#">About Us</a></li>
        <li><a rel="experiments" title="" href="#">Tutorials</a></li>
        <li><a rel="photography" title="" href="#">Contact Us</a></li>
    </ul>
</div>

<div id="menu">
	<ul id="thirdmenu">
        <li><a title="" href="#all">Home</a></li>
        <li><a rel="graphicdesign" title="" href="#">Projects</a></li>
        <li><a rel="prints" title="" href="#" class="current">Services</a></li>
        <li><a rel="pweb" title="" href="#">About Us</a></li>
        <li><a rel="experiments" title="" href="#">Tutorials</a></li>
        <li><a rel="photography" title="" href="#">Contact Us</a></li>
	</ul>
</div>

<div id="menu">
	<ul id="fourthmenu">
        <li><a title="" href="#all">Home</a></li>
        <li><a rel="graphicdesign" title="" href="#">Projects</a></li>
        <li><a rel="prints" title="" href="#">Services</a></li>
        <li><a rel="pweb" title="" href="#" class="current">About Us</a></li>
        <li><a rel="experiments" title="" href="#">Tutorials</a></li>
        <li><a rel="photography" title="" href="#">Contact Us</a></li>
	</ul>
</div>