Css ve Html İle Css ve Html İle Dikey Açılır Menü Uygulamaları 2 | E L M A

Css ve Html İle Css ve Html İle Dikey Açılır Menü Uygulamaları 2

  

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


Css ve Html Programlama Örnekleri


Css ve Html İle Dikey Açılır Menü Uygulamaları Kod Alanı


Css ve Html  web programlama dilinde  Dikey Açılır Menü Uygulamaları 2 kod metnini oluşturduk. Bu uygulamamızda html web programlama dili ile oluşturulan ve web tasarımında dikey açılır menü oluşturmayı öğreneceğiz. Öncelikle html dosyamız ile oluşturduğumuz listeleri css kullanımı ile dikey açılır menü haline getireceğiz. Bu uygulamamız bu gibi işlemler için oldukça basit ve anlaşılır bir örnektir. Bu uygulamamız bu konu ile ilgili farklı bir örnek uygulama sunmaktadır. 


Uygulamanın html kod metin alanı aşağıdaki gibidir:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.programlamahocam.com</title>
<link rel="stylesheet" href="stil.css">
</head>

<body>
<div class="acilirmenu">
<ul>
<li><a href="index.html">Anasayfa</a></li>
<li><a href="#">Elektronik</a>
<ul>
<li><a href="#">Güvenlik sistemleri</a></li>
<li><a href="#">Haberleşme sistemleri</a></li>
<li><a href="#">Yüksek Gerilim sistemleri</a></li>
</ul>
</li>
<li><a href="#">Bilgisayar</a>
<ul>
<li><a href="#">Bilgisayar Teknik Servisi</a></li>
<li><a href="#">Veritabanı Programcılığı</a></li>
<li><a href="#">Web Programcılığı</a></li>
<li><a href="#">Ağ İşletmenliği</a></li>
</ul>
</li>
<li><a href="#">Rehberlik servisi</a></li>
<li><a href="#">Okul Aile Birliği</a></li>
<li><a href="#">Dosyalar</a></li>
<li><a href="#">Hakkımızda</a></li>
</ul>

</div>
</body>
</html>


Uygulamanın css kod metin alanı aşağıdaki gibidir:


/* programlamahocam.com Dikey açılır menü örneği */
.acilirmenu{
width:180px;
height:auto;
}
.acilirmenu ul{
width:180px;
margin:0;
padding:0;
list-style-type:none;
}
.acilirmenu li{
position: relative;
}
.acilirmenu li ul{
position:absolute;
list-style-type:none;
left:179px;
width:180px;
display:none;
top:0;
}
.acilirmenu li a{
height:30px;
display: block;
text-decoration: none;
background-color: #7E97D6;
color:#FFF;
font:500 15px Verdana;
padding:5px;
border:1px solid #FFF;
border-bottom:0;
text-align: center;
line-height: 30px;
}
.acilirmenu li a:hover{
background-color:#5373C8;
color:#000;
}
.acilirmenu li:hover ul{
display:block;
}

Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.

Yorum Gönder

Daha yeniDaha eski