Mintik posted
4 year ago

3D realistic horizontal navigation

gerçekçi

James Nowland  tarafından  hazırlanmış mükemmel  bir Css3  üst menü örneği.  Aslında  menü  olarak hazırlanmamış bir örnek.  jQuery ve Css3  kullanılarak hazırlanmış  tıklandığında  içeri  batıp kalan bir buton örneğiydi. Kendimce  ufak tefek  birkaç değişiklik yaptıktan sonra bir  üst menü  örneği  olarak sizlerle  paylaşıyorum.

Menü butonlarının üstünde hafif  bir ışık efekti bulunuyor. Tıklanmış olan butonun ışığı mavi renkli olarak ayarlanmış.  Ziyaretçiler  butonlara  tıklayıp  açılan sayfada  sayfa ile ilişkili  olan butonun diğerlerinden farklı görünmesi  için aktif sınıfına  dahil etmeniz gerekiyor. Yada biraz değişiklik yaparak sadece mousenin üstünde olduğu butonun içerde batmış gibi görünmesini sağlayabilirsiniz. Menü  örneği herhangi  bir resim ve JavaScript  kullanılmadan hazırlanmış bir örnektir.

Demo sayfasında her  buton için bir sayfa yerleştirdim. Sayfa boyutu 802 bayt kadar küçük olunca  tıklandığında  açılması  anlık oluyor. Bu sizi  yanıltmasın. Her buton için ayrı  bir  sayfa  bulunuyor ve tıkladığınızda  buton ile ilişkilendirilmiş sayfa açılıp buton içerde  basılı  görünüyor.

Kullanım

Css : 

body {
  background: #2a2a2a;
  font-family: sans-serif;
}

.Nav:after {
  content: "";
  display: table;
  clear: both;
}

.buton:before, .buton:after {
  content: '';
  display: block;
  position: absolute;
}

.container {
  text-align: center;
  padding: 3.75em 0;
}

.Nav {
  list-style: none;
  margin-left: 0;
  font-size: 0.85em;
}

.ButonCerceve {
  -webkit-border-radius: 0.4375em;
  -moz-border-radius: 0.4375em;
  -ms-border-radius: 0.4375em;
  -o-border-radius: 0.4375em;
  border-radius: 0.4375em;
  -webkit-box-shadow: #4d4d4d 0 -1px 0px 0px inset, rgba(255, 255, 255, 0.0857) 0 -5px 0px 0px inset, #1e1e1e 0 4px 0px 0px inset;
  -moz-box-shadow: #4d4d4d 0 -1px 0px 0px inset, rgba(255, 255, 255, 0.0857) 0 -5px 0px 0px inset, #1e1e1e 0 4px 0px 0px inset;
  box-shadow: #4d4d4d 0 -1px 0px 0px inset, rgba(255, 255, 255, 0.0857) 0 -5px 0px 0px inset, #1e1e1e 0 4px 0px 0px inset;
  background: #242424;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: inline-block;
  text-align: center;
  padding: 0.375em 0.3125em;
  position: relative;
}

.ButonCerceve:after {
  -moz-border-radius-bottomright: 0.4375em;
  -webkit-border-bottom-right-radius: 0.4375em;
  border-bottom-right-radius: 0.4375em;
  background: rgba(36, 36, 36, 0.4);
  width: 0.4375em;
  height: 0.4375em;
  bottom: 0;
  right: 0;
}

.buton {
  -webkit-border-radius: 0.3125em;
  -moz-border-radius: 0.3125em;
  -ms-border-radius: 0.3125em;
  -o-border-radius: 0.3125em;
  border-radius: 0.3125em;
  -webkit-box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.05) 0 1px 0px 1px inset, rgba(0, 0, 0, 0.7) 0 1px 2px 0px, rgba(9, 9, 9, 0.6) 0 2px 3px 2px;
  -moz-box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.05) 0 1px 0px 1px inset, rgba(0, 0, 0, 0.7) 0 1px 2px 0px, rgba(9, 9, 9, 0.6) 0 2px 3px 2px;
  box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.05) 0 1px 0px 1px inset, rgba(0, 0, 0, 0.7) 0 1px 2px 0px, rgba(9, 9, 9, 0.6) 0 2px 3px 2px;
  background-color: #343434;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(78, 78, 78, 0.15)), color-stop(2%, rgba(65, 65, 65, 0.15)), color-stop(5%, rgba(59, 59, 59, 0.15)), color-stop(32%, rgba(56, 56, 56, 0.15)), color-stop(33%, rgba(54, 54, 54, 0.15)), color-stop(46%, rgba(53, 53, 53, 0.15)), color-stop(47%, rgba(51, 51, 51, 0.15)), color-stop(60%, rgba(50, 50, 50, 0.15)), color-stop(61%, rgba(48, 48, 48, 0.15)), color-stop(100%, rgba(42, 42, 42, 0.15)));
  background-image: -webkit-linear-gradient(top, rgba(78, 78, 78, 0.15) 0%, rgba(65, 65, 65, 0.15) 2%, rgba(59, 59, 59, 0.15) 5%, rgba(56, 56, 56, 0.15) 32%, rgba(54, 54, 54, 0.15) 33%, rgba(53, 53, 53, 0.15) 46%, rgba(51, 51, 51, 0.15) 47%, rgba(50, 50, 50, 0.15) 60%, rgba(48, 48, 48, 0.15) 61%, rgba(42, 42, 42, 0.15) 100%);
  background-image: -moz-linear-gradient(top, rgba(78, 78, 78, 0.15) 0%, rgba(65, 65, 65, 0.15) 2%, rgba(59, 59, 59, 0.15) 5%, rgba(56, 56, 56, 0.15) 32%, rgba(54, 54, 54, 0.15) 33%, rgba(53, 53, 53, 0.15) 46%, rgba(51, 51, 51, 0.15) 47%, rgba(50, 50, 50, 0.15) 60%, rgba(48, 48, 48, 0.15) 61%, rgba(42, 42, 42, 0.15) 100%);
  background-image: -o-linear-gradient(top, rgba(78, 78, 78, 0.15) 0%, rgba(65, 65, 65, 0.15) 2%, rgba(59, 59, 59, 0.15) 5%, rgba(56, 56, 56, 0.15) 32%, rgba(54, 54, 54, 0.15) 33%, rgba(53, 53, 53, 0.15) 46%, rgba(51, 51, 51, 0.15) 47%, rgba(50, 50, 50, 0.15) 60%, rgba(48, 48, 48, 0.15) 61%, rgba(42, 42, 42, 0.15) 100%);
  background-image: linear-gradient(top, rgba(78, 78, 78, 0.15) 0%, rgba(65, 65, 65, 0.15) 2%, rgba(59, 59, 59, 0.15) 5%, rgba(56, 56, 56, 0.15) 32%, rgba(54, 54, 54, 0.15) 33%, rgba(53, 53, 53, 0.15) 46%, rgba(51, 51, 51, 0.15) 47%, rgba(50, 50, 50, 0.15) 60%, rgba(48, 48, 48, 0.15) 61%, rgba(42, 42, 42, 0.15) 100%);
  background-size: 4px 4px;
  float: left;
  margin-right: 0.125em;
  padding: 0.375em 0.4375em;
  position: relative;
  width:150px;
}
.buton a {
  -webkit-border-radius: 0.45833em;
  -moz-border-radius: 0.45833em;
  -ms-border-radius: 0.45833em;
  -o-border-radius: 0.45833em;
  border-radius: 0.45833em;
  text-shadow: black 0 -1px 0;
  background: rgba(182, 182, 182, 0.018);
  color: rgba(255, 255, 255, 0.85);
  display: block;
  font-family: 'Fresca', sans-serif;
  font-size: 1.5em;
  padding: 0.5em 0.5em 0.5em;
  text-decoration: none;
}
.buton:hover {
  -webkit-box-shadow: rgba(255, 255, 255, 0.05) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.02) 0 1px 0px 1px inset, rgba(9, 9, 9, 0.5) 0 2px 2px 1px;
  -moz-box-shadow: rgba(255, 255, 255, 0.05) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.02) 0 1px 0px 1px inset, rgba(9, 9, 9, 0.5) 0 2px 2px 1px;
  box-shadow: rgba(255, 255, 255, 0.05) 0 1px 0px 0px inset, rgba(255, 255, 255, 0.02) 0 1px 0px 1px inset, rgba(9, 9, 9, 0.5) 0 2px 2px 1px;
}
.buton:hover a {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}
.buton:after {
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.5)), color-stop(69%, rgba(255, 255, 255, 0.11)), color-stop(80%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.11) 69%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
  background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.11) 69%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.11) 69%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.11) 69%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);
  width: 100%;
  height: 1px;
  left: 0;
  top: 0;
}

.aktif {
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset;
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset;
  background-color: #2d2d2d;
  background-image: linear-gradient(transparent 50%, #2e2e2e 50%);
  background-size: 2px 2px;
}
.aktif a {
  text-shadow: rgba(255, 255, 255, 0.4) 0 0 35px, rgba(76, 190, 255, 0.95) 0 0 25px;
  background: none;
  color: #4cbeff;
}
.aktif:before {
  background-image: -webkit-gradient(radial, 50%, 0, 50%, 57, color-stop(0%, rgba(41, 137, 216, 0.51)), color-stop(53%, rgba(30, 87, 153, 0.01)), color-stop(54%, rgba(30, 87, 153, 0)), color-stop(57%, rgba(30, 87, 153, 0)));
  background-image: -webkit-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);
  background-image: -moz-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);
  background-image: -o-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);
  background-image: radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);
  -webkit-box-shadow: rgba(76, 190, 255, 0.02) 0 0 0px 3px inset;
  -moz-box-shadow: rgba(76, 190, 255, 0.02) 0 0 0px 3px inset;
  box-shadow: rgba(76, 190, 255, 0.02) 0 0 0px 3px inset;
  top: -0.25em;
  left: 10%;
  width: 80%;
  height: 0.375em;
}
.aktif:after {
  background-image: -webkit-gradient(radial, 50%, 0, 50%, 57, color-stop(0%, rgba(41, 137, 216, 0.51)), color-stop(53%, rgba(30, 87, 153, 0.01)), color-stop(54%, rgba(30, 87, 153, 0)), color-stop(57%, rgba(30, 87, 153, 0)));
  background-image: -webkit-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);
  background-image: -moz-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);
  background-image: -o-radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);
  background-image: radial-gradient(center, ellipse cover, rgba(41, 137, 216, 0.51) 0%, rgba(30, 87, 153, 0.01) 53%, rgba(30, 87, 153, 0) 54%, rgba(30, 87, 153, 0) 57%);
  -webkit-box-shadow: rgba(255, 255, 255, 0.05) 0 -5px 0px 0px inset;
  -moz-box-shadow: rgba(255, 255, 255, 0.05) 0 -5px 0px 0px inset;
  box-shadow: rgba(255, 255, 255, 0.05) 0 -5px 0px 0px inset;
  top: inherit;
  bottom: -0.5em;
  left: 0;
  width: 100%;
  height: 0.5em;
}
.aktif:hover {
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset;
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 0 1px inset;
}

 Html : 

<div class="container">
	<ul class="Nav ButonCerceve">
		<li class="buton"><a href="#">Anasayfa</a></li>
		<li class="buton"><a href="#">jQuery</a></li>
		<li class="buton aktif"><a href="#">Css3</a></li>
		<li class="buton"><a href="#">Wordpress</a></li>
		<li class="buton"><a href="#">Tutorial</a></li>
	</ul>
</div>
Tags:
Yatay menü örnekleri
Mintik is curious about your thoughts. Add a comment
Did you know that members who log in don't see ads?
Sign in with E-mail
Continue with Google
Continue with X

  1. karekareoyun says:
    3 September 2015 at 21:30

    bu kodu nereye yapıştıracağız.

  2. eeda says:
    28 March 2017 at 13:20

    denedim olmadı madem yapamıyorsun milleti kandırmayın