Web Tasarım

CSS Yatay Menü Yapımı

24 Ekim 2019 aydiner #html #css #webtasarım

Bu derste CSS ile web sayfası için en basit haliyle yatay menü yapımı örneğini görebilirsiniz. Örnek içinde Mouse ile menü üzerinde renk değişimini sağlamak için hover seçicisi’ de kullanılmıştır.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css menü</title>
       <style>
     *{
       margin:0px;
	   padding:0px;

     }
   
     #menu li{
      overflow: hidden;
       list-style-type: none;
       background-color: #242B6F;
       padding: 0px;
       width: 200px;
       height: 50px;
       margin-right: 1px; 
       font-size: 20px;
       font-family: calibri,arial,verdana;
       line-height: 50px;
       float: left;
     }
     
     #menu a{
       text-decoration: none;
       color: whitesmoke;
       font-weight: 600;
       display: block; /*a etiketinin etki alanını nesne boyutlarına eşitler,blok haline */  
       text-align: center;
       transition: 1s;
       
       
     }
     
      #menu span{
       display: block;
       margin-top:-60px;
     }
     
     #menu a:hover{
      
        background-color: #8596F9; 
           color: #830D0D;       
       
     }     
      </style>
</head>
 
<body>
    <div id="menu">
<ul>
<li><a href="#">ANASAYFA</a></li>
<li><a href="#">ÜRÜNLER</a></li>
<li><a href="#">HAKKIMIZDA</a></li>
<li><a href="#">İLETİŞİM</a></li>
</ul>
</div>
</body>
</html>