Blog Kategorileri

Son Eklenen Konular

Css & jquery Açılan menü
Resim

Css seçicilerini anlatmak amaçlı konu hazırlarken oluşturduğum bir uygulama

Default, gri, beyaz ve siyah olarak 4 farklı şekilde kullanılabilinir

Örnek uygulamayı görüntülemek için buraya tıklayın

Html, javascript ve css kodları aşağıda

html

<div class="menu grid-f3">

    <ul class="navmenu">
        <li><a href="http://mavitm.com" target="_blank">Anasayfa</a></li>
        <li><a href="http://mavitm.com" target="_blank">Kurumsal</a>
            <ul class="navmenusub"><li><a href="http://mavitm.com" target="_blank">Hakkımızda</a></li>
                <li><a href="http://mavitm.com" target="_blank">Misyon</a></li>
                <li><a href="http://mavitm.com" target="_blank">Vizyon</a>
                     <ul class="navmenusub"><li><a href="http://mavitm.com" target="_blank">Hakkımızda</a></li>
                        <li><a href="http://mavitm.com" target="_blank">Misyon</a></li>
                        <li><a href="http://mavitm.com" target="_blank">Vizyon</a></li>
                    </ul> 
            	</li>
            </ul> 
        </li>
        <li><a href="http://mavitm.com" target="_blank">Referanslar</a>
            <ul class="navmenusub"><li><a href="http://mavitm.com" target="_blank">Sağlık Kuruluşları</a></li>
                <li><a href="http://mavitm.com" target="_blank">Oteller</a></li>
                <li><a href="http://mavitm.com" target="_blank">Gezi Mekanları</a></li>
            </ul> 
        </li>
        <li><a href="http://mavitm.com" target="_blank">İletişim</a>
            <ul class="navmenusub"><li><a href="http://mavitm.com" target="_blank">İletişim Bilgileri</a></li>
                <li><a href="http://mavitm.com" target="_blank">İletişim Formu</a></li>
                <li><a href="http://mavitm.com" target="_blank">İnsan Kaynakları</a></li>
                <li><a href="http://mavitm.com" target="_blank">Geri Bildirim</a></li>
            </ul> 
        </li>
    </ul>

    <div class="clear left"></div>
</div>

javascript

$(document).ready(
	function(){
		
		$(".navmenu ul ").css({display: "none"}); // Opera Fix
		$(".navmenu li").hover(
			function(){$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);},
			function(){$(this).find('ul:first').css({visibility: "hidden"});}
		);
		
		$(".navmenusub").each(
			function(){
				$(this).parent("li").find("a:first").append('<b class="navmenuarrow"></b>');
			}
		);
	}
);

css

.menu{margin:50px 0px; min-height:30px;}

.navmenu{margin:0px; padding:0px; list-style:none; width:100%;}
	.navmenu > li{float:left; border: 1px solid #e3e3e3; border-left:1px solid #FFF;}
	.navmenu > li:first-child{
		border-left:1px solid #e3e3e3;
		  -webkit-border-bottom-left-radius: 4px;
				  border-bottom-left-radius: 4px;
		  -webkit-border-top-left-radius: 4px;
				  border-top-left-radius: 4px;
		  -moz-border-radius-bottomleft: 4px;
		  -moz-border-radius-topleft: 4px;
	}
	.navmenu > li:last-child{
		  -webkit-border-top-right-radius: 4px;
				  border-top-right-radius: 4px;
		  -webkit-border-bottom-right-radius: 4px;
				  border-bottom-right-radius: 4px;
		  -moz-border-radius-topright: 4px;
		  -moz-border-radius-bottomright: 4px;			
		}
	
	.navmenu li{  
		position:relative;
		background-color: #fafafa;
		background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
		background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
		background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
		background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
	}
	.navmenu li:hover, .navmenu .active{  
		background-color: #fafafa;
		background-image: -moz-linear-gradient(top, #f2f2f2, #ffffff);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#ffffff));
		background-image: -webkit-linear-gradient(top, #f2f2f2, #ffffff);
		background-image: -o-linear-gradient(top, #f2f2f2, #ffffff);
		background-image: linear-gradient(to bottom, #f2f2f2, #ffffff);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffffffff', GradientType=0);
	}
		
		.navmenu li a{display:block; color:#333; text-decoration:none; padding:10px 10px;}
	
			.navmenu ul{padding:0px; margin:0px; list-style:none; position:absolute; display:none;}
			.navmenu li ul{left:100%; top:0px;}	
			.navmenu > li > ul{top:100%; left:0px;}	
				.navmenu > li  ul li{min-width:200px; border: 1px solid #e3e3e3; border-top:none;}	
			
				.navmenu > li  ul li:first-child{
					border-top: 1px solid #e3e3e3;	
					-webkit-border-top-right-radius: 4px;
						  border-top-right-radius: 4px;
				  -webkit-border-top-left-radius: 4px;
						  border-top-left-radius: 4px;
				  -moz-border-radius-topleft: 4px;
				  -moz-border-radius-topright: 4px;
				}
				.navmenu > li  ul li:last-child{
				  -webkit-border-bottom-right-radius: 4px;
						  border-bottom-right-radius: 4px;
				  -webkit-border-bottom-left-radius: 4px;
						  border-bottom-left-radius: 4px;
				  -moz-border-radius-bottomleft: 4px;
				  -moz-border-radius-bottomright: 4px;	
				}
	
	
	
	.navmenuarrow {
	  display: inline-block;
	  width: 0;
	  height: 0;
	  vertical-align: top;
	  border-top: 4px solid #000000;
	  border-right: 4px solid transparent;
	  border-left: 4px solid transparent;
	  content: "";
	  margin:8px 0px 0px 10px;
	}
	
	.navmenusub .navmenuarrow {
	  display: inline-block;
	  width: 0;
	  height: 0;
	  vertical-align: top;
	  border-left: 4px solid #000000;
	  border-top: 4px solid transparent;
	  border-bottom: 4px solid transparent;
	  content: "";
	  margin:6px 0px 0px 10px;
	}

/** COLOR **/
.navmenu.gri li{
	  background-color: #ededed;
  *background-color: #e5e5e5;
  background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5));
  background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5);
  background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5);
  background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
}

.navmenu.beyaz li{
  background-color: #fafafa;
  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
}

.navmenu.siyah li{
  background-color: #000000;
  background-image: -moz-linear-gradient(top, #000000, #333333);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#333333));
  background-image: -webkit-linear-gradient(top, #000000, #333333);
  background-image: -o-linear-gradient(top, #000000, #333333);
  background-image: linear-gradient(to bottom, #000000, #333333);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#ff333333', GradientType=0);
}
.navmenu.siyah > li{float:left; border: 1px solid #000000; border-left:1px solid #666666;}
.navmenu.siyah > li ul li{border-bottom:1px solid #666;}
.navmenu.siyah li a{color:#FFF;}
.navmenu.siyah > li .navmenuarrow{border-top: 4px solid #FFFFFF;}
.navmenu.siyah  li .navmenusub .navmenuarrow{border-left: 4px solid #FFFFFF; border-top: 4px solid transparent;}
comments powered by Disqus