CSS DİKEY MENÜ YAPIMI

Web sitelerinin önemli öğelerinden biridir menüler. Web sitemizi ziyaret eden kullanıcılar, sayfalar arasında gezinirken menüler sayesinde diğer sayfalara hızlı erişim sağlarlar. CSS ile oluşturacağımız menüler esnek, kolay düzenlenebilen, çabuk yüklenen ve güzel görünümlü menülerdir. Sayfa tasarımımıza göre çeşitli menüler yapabiliriz.

HTML Sırasız listeleri ( ul etiketlerini ) CSS ile biçimlendirerek çok farklı, modern ve güzel menüler oluşturabiliriz. Örneğin ul etiketleri ile oluşturulmuş listeler dikey menülere, yatay menülere, açılır menülere ve mega menülere dönüştürülebilmektedir. Bu yazımızda HTML ve CSS kullanarak basit bir yatay açılır menü tasarımı yapacağız.

Örneklerimizde dikey menüyü standart bir HTML listesinden oluşturacağız.

Navigation (Gezinme) Menü temel olarak bir bağlantı listesidir, bu nedenle <ul> ve <li> öğelerini kullanmak gerekir:

<ul>
  <li><a href="#index">Ana sayfa</a></li>

  <li><a href="#hakkımızda">Hakkımızda</a></li>

  <li><a href="#urunler">Ürünler</a></li>

  <li><a href="#referanslar">Referanslar</a></li>

  <li><a href="#iletisim">İletişim</a></li>
</ul>

ÇIKTI:

css liste

Listeden madde işaretlerini kenar boşluklarını ve dolguları kaldıralım.


ul {
    list-style-type: none;

    margin: 0;

    padding: 0;
}

ÇIKTI:

css liste

Yukarıda ki örnekte margin:0 ve padding:0 vermemizin nedeni tarayıcılarda (varsayalı değerleri vardır) farklılıkları gidermiş oluruz.

Navigasyon menü oluşturmak için yukarıdaki kodun yanı sıra listenin içindeki <a> öğelerini de CSS style verebiliriz.

ul {
  list-style-type: none;

  margin: 0;

  padding: 0;
}

li a {

  display: block;

  width: 140px;

  color: white;

  text-decoration:none;

  background-color: #e67e22;
}

ÇIKTI:

css liste

Yukarı örnekte Linklere ( display: block )blok eleman olarak göstermek tüm link alanını tıklanabilir yaparız.

Blok öğelere ( width: 140px ) 140 piksellik bir genişlik belirtiyoruz.

Link öğelerine text-decoration:none; özelliği vererek alt çizgi özelliğini kaldıyoruz.

Link öğelerin color özelliği ile link yazı rengini Siyah yapıyoruz.

Dikey Menü Örnekler



vertical menü

Yukarıda ki örnekte olduğu gibi Carrot bir arka plan rengiyle temel bir dikey gezinme çubuğu oluşturun ve kullanıcı mouse üzerlerinde hareket ettirdiğinde bağlantıların arka plan rengini değiştirin:

ul {
    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 200px;

    background-color: #e67e22;
}

li a {
    display: block;

    color: #000;

    padding: 8px 16px;

    text-decoration: none;
}

li a:hover {
    background-color: #d35400;

    color: white;
}

Aktif Sayfa Belirtmek


Kullanıcının hangi sayfada olduğunu bilmesini sağlamak için geçerli bağlantıya "etkin" bir sınıf ekleyin:

ÖRNEK:

.aktif {
    background-color: #4CAF50;

    color: white;
}

Tüm css kodları:


ul {
    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 200px;

    background-color: #e67e22;
}

li a {
    display: block;

    color: #000;

    padding: 8px 16px;

    text-decoration: none;
}

li a.active {
    background-color: #3498db;

    color: white;
}

li a:hover:not(.active) {
    background-color: #d35400;

    color: white;
}

HTML:

<ul>
  <li><a class="active" href="#index">Ana sayfa</a></li>

  <li><a href="#hakkımızda">Hakkımızda</a></li>

  <li><a href="#urunler">Ürünler</a></li>

  <li><a href="#referanslar">Referanslar</a></li>

  <li><a href="#iletisim">İletişim</a></li>
</ul>

ÇIKTI:

vertical menü

Baglantılara Border Ekleme


Bağlantıları ortalamak için text-align:center <li> veya <a> etiketine ekleyin.

Navigasyon menüye kenarlık eklemek için <ul> etiketine border ekleyelim. Ayrıca navbar'ın içinede kenarlık ekleyelim.

Sonuncu <li> etiketini ayrı tutmak için border-bottom:none verelim,

CSS:

ul {
    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 200px;

    background-color:#e67e22;

    border: 1px solid #555;
}

li a {
    display: block;

    color: #000;

    padding: 8px 16px;

    text-decoration: none;
}

li {
    text-align: center;

    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

li a.active {
    background-color:#3498db;

    color: white;
}

li a:hover:not(.active) {
    background-color:#d35400;

    color: white;
}

ÇIKTI:

vertical menü

Tam Boylu Sabit Dikey Menü


Tam yükseklikte, sticky (yapışkan) bir yan Menü oluşturun:

CSS:

body {
    margin: 0;
}

ul {
    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 25%;

    background-color: #f1f1f1;

    position: fixed;

    height: 100%;

    overflow: auto;
}

li a {
    display: block;

    color: #000;

    padding: 8px 16px;

    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;

    color: white;
}

li a:hover:not(.active) {
    background-color: #555;

    color: white;
}

HTML:

<ul>
  <li><a class="active" href="#home">Home</a></li>

  <li><a href="#news">News</a></li>

  <li><a href="#contact">Contact</a></li>

  <li><a href="#about">About</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">

<h2>Fixed Full-height Side Nav</h2>

<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.....</p>

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.....</p>

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.....</p>

<p>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.....</p>

ÇIKTI:

vertical menü

Açılır dikey menü yapalım.

CSS:

.nav {
  width: 300px;
}

.anamenu, .altmenu {
  list-style: none;

  padding: 0;

  margin: 0;
}

.anamenu a{
  display: block;

  background-color:#e67e22;

  text-decoration: none;

  padding: 10px;

  color: #000;
}

.anamenu a:hover {
    background-color:#d35400;
}


.anamenu li:hover .altmenu {
  display: block;

  max-height: 200px;
}

.altmenu a{
	background-color:#f39c12; 
}

.altmenu a:hover {
  background-color:#7f8c8d;
}

.altmenu {
  overflow: hidden;

  max-height: 0;

  -webkit-transition: all 0.5s ease-out;
}

HTML:

<nav class="nav">

  <ul class="anamenu">

    <li><a href="">ANASAYFA</a></li>

    <li><a href="">HAKKIMIZDA</a></li>

    <li><a href="">DERS</a>

      <ul class="altmenu">

        <li><a href="">PHP</a></li>

        <li><a href="">CSS</a></li>

        <li><a href="">HTML</a></li>

      </ul>

    </li>

    <li><a href="">LİNUX</a></li>

  </ul>

</nav>

ÇIKTI:

vertical menü

Açılır Dikey Menü Yapalım (Menü Sağa Açılsın)

ÖRNEK:

vertical menü

CSS:

ul {
    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 200px;

    background-color: #34495e;

}

ul li{
	position:relative;
}

li a {
    display: block;

    color:white;

    padding: 8px 16px;

    text-decoration: none;

    border:1px solid silver;
}

li a:hover {

    background-color: #f39c12;

    color: white;
}

li:hover ul{

display:block;
}

ul li ul{
	position:absolute;

	left:200px;

	top:0;
	
	display:none;
}

HTML:

<ul>
<li><a href="">ANASAYFA</a></li>

    <li><a href="">HAKKIMIZDA</a></li>

    <li><a href="">DERS</a>

      <ul>

        <li><a href="">PHP</a></li>

        <li><a href="">CSS</a></li>

        <li><a href="">HTML</a></li>

      </ul>

    </li>

    <li><a href="">LİNUX</a></li>

  </ul>

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

3739

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.