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 İ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>
/* 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.