Css ve Html İle Yatay Menü Oluşturma Uygulaması

Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Css ve Html İle Yatay Menü Oluşturma Uygulaması programını aktaracağız.  Css ve Html  de kodlama nasıl gerçekleşir? Css ve Html İle Yatay Menü Oluşturma Uygulaması nasıl kodlanır? Gibi sorularınızın cevabını bu içeriğimizde bulabilirsiniz.

Css ve Html İle Yatay Menü Oluşturma Uygulaması Kod Alanı

Css ve Html  web programlama dilinde Yatay Menü Oluşturma Uygulaması kod metnini oluşturduk. Bu uygulamamızda html web programlama dilinde css yardımıyla basit bir yatay menü oluşturmayı öğreneceğiz. Bu uygulamayla hem html kullanımı hem css kullanımı hem de ikisinin aynı anda kullanımının yanı sıra basit düzeyde yatay menü yapımı ve yatay menülerin nasıl kullanabileceğini öğreneceğiz. Bu uygulamanın kod metni aşağıdaki gibidir:

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
    <title>www.programlamahocam.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>