3D realistic horizontal navigation

By

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 : 



3 Comments
  1. eeda 3 years ago
    Reply

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

    • Ali 3 years ago
      Reply

      Download butonuna basın orada hazır kurulu var.

  2. karekareoyun 5 years ago
    Reply

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

Leave a Comment

Your email address will not be published.

You may also like

Trend