DropDown horizontal nav

DropDown

Sürekli görmeye alışık olduğumuz ve herkesin değil de web sitesi sahiplerinin ortalama 95%’inin (benim tahminim)  kullanıdığı açılır örnekleri bilmeyeniniz  yoktur. Mouse başlıkların üzerine geldiğinde aşağıya doğru alt kategilerin açıldığı örneklerdir bunlar. Değişik açılma efektleri kullanılarak yapılmış binlerce örneği var bu bahsettiğim çalışmaların. Bir de mouse linklerin üzerine geldiğinde menü çerçevesinin hemen altında tam boy genişlikte açılan ince şeritli örnekler vardır ve alt kategoriler alt alta değil de yan yana sıralanırlar bu bölümde. Bu seferki paylaştığımız çalışma da aynı bu şekilde çalışıyor.

Aslında sadece resim eklemek her şeyi açıklamaya yeterdi zaten resme baktığınızda da ne olduğunu anlayabiliyorsunuz ama bir web tasarım örneğini paylaşırken ne olduğu hakkında birşeyler saçmalamak zorundayız Google amca yüzünde :) Ben ara sıra böyle yazarım alakalı veya alakasız konulardan. Sonuçta girdiğimiz her kelime resim ve başlık ile eşleşiyor ve arama sonuçlarında iyi bir yer edinebiliyoruz. Yazı ve başlıklarda asıl olması gereken kelimeleri etiket alanında girmeye özen gösteriyorum. Bu d abenim yeni yaptığım bir seo denemesi. İlerleyen zamanlarda eğer iyi bir sonuç elde edebilirsem detaylı bir anlatım yapmayı düşünüyorum bu konuda.

Siz yine de benim yazdıklarımı fazla dikkate  almayın ve bir başlığa tıkladığınız zaman hemen resme bakın eğer tasarım hoşunuza giderse ardından  demo ve indirme butonlarına tıklayın. Bu arada tasarım kelimesine de iyi para geliyor demek geliyor içimden. Bazıları böyle dedim diye bu kelimeye ağırlık vermeye çalışmasın sadece şaka yapıyorum :)

Hah bide unutmadan zaten görüyorsunuz ama yine de belirtmek zorundayım. Tasarımımız mavi ve siyah renklerinden oluşuyor linkler de beyaz renklerinde hazırlanmış.

Kullanım

  • Head etiketleri arasına eklenmesi gereken bölümler.

Js adresi : 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

 Css : 

<style type="text/css">
body {
	font: 10px normal Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}
h1 {
	font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
	color: #333;
	margin: 0;
	padding: 5px 0;
}
h1 small{
	font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing: 1.5em;
	display: block;
	color: #fff;
}
.container {width: 970px; margin: 0 auto;}

ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 970px;
	list-style: none;
	position: relative;
	font-size: 1.2em;
	background:url(images/topnav_s.gif) repeat-x;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #555;
}
ul#topnav li a {
	padding: 10px 15px;
	display: block;
	color: #f0f0f0;
	text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url (images/topnav_a.gif) repeat-x; }
ul#topnav li span {
	float: left;
	padding: 15px 0;
	position: absolute;
	left: 0; top:35px;
	display: none;
	width: 970px;
	background: #1376c9;
	color: #fff;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; }
ul#topnav li span a { display: inline; }
ul#topnav li span a:hover {text-decoration: underline;}
</style>

JavaScript :

<script type="text/javascript">
$(document).ready(function() {

$("ul#topnav li").hover(function() { 
	$(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); 
	$(this).find("span").show(); 
} , function() { 
	$(this).css({ 'background' : 'none'}); 
	$(this).find("span").hide(); 
});

});
</script>
  •  Body etiketleri arasına eklenmesi gereken bölüm.

Html : 

<div class="container">	
	<h1>Css ve jQuery Üst Menü</h1>

    <ul id="topnav">
        <li><a href="http://mintik.com">Anasayfa</a></li>
        <li>
            <a href="http://mintik.com/webmaster/">Webmaster</a>
            <span>
                <a href="http://mintik.com/jquery/">jQuery</a> |
                <a href="http://mintik.com/css/">Css3</a> |
                <a href="http://mintik.com/html5/">Html5</a>
            </span>
        </li>
        <li>
            <a href="http://mintik.com/scritp/">Script</a>
            <span>
                <a href="http://mintik.com/php-scriptler/">Php</a> |
                <a href="http://mintik.com/flash/">Flash</a> 
            </span>
        </li>
        <li>
            <a href="http://mintik.com/wordpress/">Wordpress</a>
            <span>
                <a href="http://mintik.com/theme/">Tema</a> |
                <a href="http://mintik.com/wordpress-widget/">Bileşen</a> |
                <a href="http://mintik.com/eklenti/">Eklenti</a> 
            </span>
        </li>
		<li>
            <a href="http://mintik.com/photoshop/">Photoshop</a>
		</li>		<li>
            <a href="http://mintik.com/2012/10/25/css3-ve-jquery-kullanilarak-olusturulmus-ust-menu-ornegi">Tutorial</a>
		</li>	
    </ul>

</div>

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-04-18 tarihinde yayınlandı,Toplam 4122 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...