Transparent horizontal nav

Web sitenizin en üstünde sabit bir şekilde kullanabileceğiniz bir çalışma. Hem sosyal ağ adresleri hem de kategorilerinizi ekleyebilirsiniz. Facebook, Twitter, Delicious ve Rss ikonları hazır eklenmiş bulunuyor. Dilerseniz sosyal medya ikonlarını kopyala-yapıştır ile çoğaltabilir yada değiştirebilirsiniz. Div sabit olarak ayarlandığı için sayfa ne kadar aşağıya doğru kaydırılırsa kaydırılsın sayfa ile beraber aşağıya iner. Ekranda tam olarak görünmüyor , mouse üzerine çerçevenin üzerine geldiğinde hafifçe aşağıya kayıyor ve divin tamamı gözüküyor. Ayrıca 0.3 opacity değeri verildiği için biraz yarı şeffaf bir görünüme sahip. Mouse üzerine geldiğinde görüntü netleşiyor.

Kullanım

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

Js dosya adresi :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

JavaScript :

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

	if($.browser.msie){
	$('.menu_wrap').css({'background-color' : '#b8e1fc','position' : 'absolute','width' : '100%'});
	}

	$('.menu_wrap').css({'opacity' : '0.3'});

	$('.menu_wrap').hover ( function () {

		$(this).animate({'margin-top' : '0px','opacity' : '1'});
		$('.menu_buttons img').animate({'opacity' : '.5'});

	}, function () {

		$(this).animate({'margin-top' : '-30px','opacity' : '0.3'});

	});

	$('.menu_buttons img').hover ( function () {

		$(this).animate({'opacity' : '1'});

	}, function () {

		$(this).animate({'opacity' : '0.5'});

	});

});

</script>

Css :

<style>
body {
	background-image: url(bg.jpg);
	background-repeat: repeat;
}

.menu_wrap {
	left: 0px;
	top: 0px;
	right: 0px;
	z-index: 999;
	width: 100%;
	height: 50px;
	background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* webkit */
	-webkit-box-shadow: 0px 2px 5px #000000;
	-moz-box-shadow: 0px 2px 5px #000000;
	box-shadow: 0px 2px 5px #000000;
	position: fixed;
	margin-top:-30px;
}
.menu_links ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
.menu_links ul li {
	display: inline;
}
.menu_links ul li a {
	float:left;
	line-height: 50px;
	padding-right: 20px;
	padding-left: 20px;
	color: #FFF;
	font-size: 22px;
	text-decoration: none;
	text-shadow: -1px -1px 1px #333;
	display: block;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #FFF;
}
.menu_links ul li a:hover {
		color: #000;

		text-shadow: -1px -1px 1px #EEE;
	background: #ffffff; /* old browsers */

background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6)); /* webkit */

}

.menu_buttons {
	float:right;
	line-height: 50px;
	height: 50px;
	margin-right: 30px;
}
.menu_buttons ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
.menu_buttons ul li {
	display: inline;
	height: 50px;
}
.menu_buttons ul li a {
	float:left;
	padding-right: 10px;
	display: block;
	border:none;
	line-height: 50px;
	padding-left: 10px;
	height: 50px;
	padding-top: 10px;

	 }

.first {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #FFF;
}
.menu_links {
	height: 50px;
	float: left;
	margin-left: 100px;
}

.content {
	height: 400px;
	width: 600px;
	margin-top: 100px;
	margin-right: auto;
	margin-left: auto;
	background-color: #666;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-align: center;
	color: #FFF;
	padding: 20px;
	border: 5px solid #333;
}
</style>

Body etiketleri arasına eklemeniz gereken bölüm.

Html :

<div class="menu_wrap">
	<div class="menu_links">
      <ul>
        <li><a class="first" href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Links</a></li>
        <li><a href="https://www.mintik.com/2012/10/22/jquery-ve-css3-navigasyon-menu-ornegi">Go Back Tutorial</a></li>
      </ul>
	</div>
    <div class="menu_buttons">
          <ul>
        <li><a class="first" href="#"><img src="facebook.png" alt="Facebook" width="32" height="32" border="0"></a></li>
        <li><a href="#"><img src="twitter.png" alt="Twitter" width="32" height="32" border="0"></a></li>
        <li><a href="#"><img src="delicious.png" alt="Delicious" width="32" height="32" border="0"></a></li>
        <li><a href="#"><img src="rss.png" alt="RSS" width="32" height="32" border="0"></a></li>
      </ul>
    </div>
</div>

<div class="content">
  <h1>CSS / jQuery Navigation Bar</h1>
  <h2>Mouseyi  sayfanın en üstündeki mavi alana doğru götürün</a></h2>

</div>

Download

Demo