CSS Basit Yatay Menü Örneği

CSS ile basit yatay menü örneğine ait kodlar ve ekran çıktısı.


<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>www.yazilimkodlama.com</title>
   <style>
     body{
       
       margin-top: 90px;
     }
   
     #ustmenu li{
      overflow: hidden;
       list-style-type: none;
       background-color: black;
       padding: 0px;
       width: 200px;
       height: 50px;
       margin: 5px;
       font-size: 20px;
       font-family: calibri,arial,verdana;
       line-height: 50px;
       float: left;
     }
     
     #ustmenu a{
       padding-top: 5px;
       text-decoration: none;
       color: darkgrey;
       display: block; /*a etiketinin etki alanını nesne boyutlarına eşitler*/  
       text-align: center;
       transition: 1s; 
       
     }
     
      #ustmenu span{
       display: block;
       margin-top:-60px;
     }
     
     #ustmenu a:hover{
      
       color: white;
       margin-top:55px;
       
       
     }     
      </style>
     
</head>
<body>
      
    <div id="ustmenu">
     <ul>
          <li><a href="#"><span>ANASAYFA</span>ANASAYFA</a></li>
          <li><a href="#"><span>HAKKIMIZDA</span>HAKKIMIZDA</a></li>
          <li><a href="#"><span>ÜRÜNLER</span>ÜRÜNLER</a></li>
          <li><a href="#"><span>İLETİŞİM</span>İLETİŞİM</a></li>
     </ul>
   </div>

</body>
</html>

<!doctype html>

<html>

<head>

<title>www.yazilimkodlama.com</title>

<style>

body{

margin-top: 90px;

}

#ustmenu li{

overflow: hidden;

list-style-type: none;

background-color: black;

padding: 0px;

width: 200px;

height: 50px;

margin: 5px;

font-size: 20px;

font-family: calibri,arial,verdana;

line-height: 50px;

float: left;

}

#ustmenu a{

padding-top: 5px;

text-decoration: none;

color: darkgrey;

display: block; /*a etiketinin etki alanını nesne boyutlarına eşitler*/

text-align: center;

transition: 1s;

}

#ustmenu span{

display: block;

margin-top:-60px;

}

#ustmenu a:hover{

color: white;

margin-top:55px;

}

</style>

</head>

<body>

<ul>

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

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

<li><a href="#"><span>ÜRÜNLER</span>ÜRÜNLER</a></li>

<li><a href="#"><span>İLETİŞİM</span>İLETİŞİM</a></li>

</ul>

</div>

</body>

</html>

2 Yorum

Ata dedi ki:
Nisan 17, 2020, 5:16 pm
Merhabalar. Menüdeki nesnelerin (butonların (Anasayfa,Hakkımızda vb.)) arasını nasıl açabiliriz, boşluğu nasıl arttırabiliriz ?
Cevapla
- Sercan dedi ki:
  Aralık 15, 2020, 3:31 pm
  “#ustmenu li” nin margin değerini arttırmayı deniyebilirsiniz
  Cevapla

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

2 Yorum

Ata için bir yanıt yazın X