Ali @mintik
20 Haziran 2020 0:22

0

Horizontal navigation

Css3 ile hazırlanmış bir üst menü örneği. Menü örneği sadece css3 kullanılarak hazırlanmıştır ve drop down (açılır kapanır) özelliği bulunuyor. Menü mavi ve beyaz renklerden oluşuyor kendi sitenize göre biraz renkler üzerinde uğraşmanız gerek. Mouse ile alt linklere sahip olan linklerin üzerine geldiğinizde alt link listesi biraz altta belirip yukarı doğru çıkıyor. Mouseyi geri çektiğiniz zaman alt link çerçevesi biraz aşağı inip kayboluyor. Alt linklerin olduğu çerçevede birde tooltip benzeri ok işaretide mevcut. Ok işareti açılan listenin hangi kategoriye bağlı olduğunu gösteriyor. Mavi ve beyaz olarak kullanılmasa bile eminim bir çok kişi tarafından beğenilip kullanılabilecek bir örnek.

Downloa

Demo

Kullanım

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

Css :

* {
  margin: 0;
  padding:0;
  font-family: sans-serif;
}
body {
  background-color:#999999;
}
nav {
  background-color: #468ECD;
  padding: 10px;
  width: 960px;
  margin: 50px auto;
  border-radius: 5px;
  text-align: center;
}
#menu li {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  position: relative;
}
#menu ul {
  visibility:hidden;
  position: absolute;
  background-color: #468ECD;
  border-radius: 3px;
  top: 100px;
  width: 150px;
  opacity: 0;
  border:1px solid white;
  text-align: left;
  -webkit-transition: top 0.2s ease-in 0.1s ,opacity 0.3s ease-in 0.1s, visibility 0.3s ease-in;
}
#menu li:hover ul{
  opacity: 1;
  top: 37px;
  visibility:visible;
}
#menu ul:before {
  content: '';
  width: 0; 
  height: 0; 
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid white;
  position: absolute;
  top: -7px;
  left: 15px;
}
#menu ul li {
  display: block;
  position: relative;
}
#menu ul li a {
  font-size: 0.6em;
  padding: 0 8px;
}
#menu a{
  display: block;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0px 10px;
  border-radius: 3px;
  font-size: 0.9em;
}
#menu a:hover {
  background-color: white;
  color: #468ECD;
  box-shadow: 0px 1px 2px rgba(0,0,0, 0.2);
  text-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}
#menu ul li a {
  border-radius: 0px;
  padding-left: 30px;
}

#menu ul li a:before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: white;
  border-radius: 50%;
  left: 10px;
  top:10px;
}
#menu ul li a:hover:before {
  background-color: #468ECD;
  width: 8px;
  height: 8px;
  left: 11px;
  top:11px;
  box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}

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

Html :

        <nav>
            <ul id="menu">
                <li><a href="http://mintik.com">Home</a></li>
                <li><a href="http://mintik.com/category/photoshop/">Photoshop</a></li>				
                <li><a href="http://mintik.com/category/webmaster/">Webmaster</a>
                    <ul>
                        <li><a href="http://mintik.com/category/css/">Css3</a></li>
                        <li><a href="http://mintik.com/category/jquery/">jQuery</a></li>
                        <li><a href="http://mintik.com/category/mootools/">Mootools</a></li>
                        <li><a href="http://mintik.com/category/yahoo-yui/">Yui</a></li>
                        <li><a href="http://mintik.com/category/html5/">Html5</a></li>
                    </ul>
                </li>
                <li><a href="http://mintik.com/category/wordpress/">Wordpress</a></li>
                <li><a href="http://mintik.com/generator/">Css3 Generator</a></li>
                <li><a href="http://mintik.com/?p=13728">Tutorial</a></li>
            </ul>
        </nav>