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ı programını aktaracağız. Css ve Html de kodlama nasıl gerçekleşir? Css ve Html İle Dikey Açılır Menü Uygulamaları 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ı 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.
Uygulamanın html kod metin alanı aşağıdaki gibidir:
<!doctype html>
<html>
<head>
<title>www.programlamahocam.com</title>
<meta charset="utf-8">
<link rel="stylesheet" href="dikey.css">
</head>
<body>
<div class="d-menu">
<ul>
<li><a href="" title="">ANA SAYFA</a></li>
<li><a href="" title="">WEB TASARIM</a>
<ul>
<li><a href="" title="">HTML</a></li>
<li><a href="" title="">CSS</a></li>
<li><a href="" title="">JAVASCRIPT</a></li>
<li><a href="" title="">PHP</a></li>
<li><a href="" title="">ASP.NET</a></li>
</ul>
</li>
<li><a href="" title="">PROGRAMLAMA</a>
<ul>
<li><a href="" title="">C#</a></li>
<li><a href="" title="">C++</a></li>
<li><a href="" title="">VB.NET</a></li>
<li><a href="" title="">ANDROID</a></li>
<li><a href="" title="">ARDUINO</a></li>
</ul>
</li>
<li><a href="" title="">GRAFİK</a>
<ul>
<li><a href="" title="">PAINT</a></li>
<li><a href="" title="">FIREWORKS</a></li>
<li><a href="" title="">PHOTOSHOP</a></li>
<li><a href="" title="">ILLUSTRATOR</a></li>
</ul>
</li>
<li><a href="" title="">HAKKIMDA</a></li>
<li><a href="" title="">İLETİŞİM</a></li>
</ul>
</div>
</body>
</html>
.d-menu{
background: #333;
width: 250px;
margin-left: 50px;
margin-top: 100px;
}
.d-menu ul li{
list-style: none;
}
.d-menu ul{
margin: 0;
padding: 0;
}
.d-menu ul li a{
text-decoration: none;
color: #fff;
padding: 10px;
display: block;
border-bottom:1px solid #282828;
}
.d-menu ul li ul {
display:none;
}
.d-menu ul li:hover ul {
display:block;
position:absolute;
margin:-40px 0 0 250px;
}
.d-menu ul li ul li a {
padding:10px;
font-size:15px;
background-color: #282828;
border-bottom:1px solid #222;
transition:all .3s ease-in-out;
width:170px;
}
.d-menu ul li a:hover {
background-color: #407ce0;
transition:all .3s ease-in-out;
}
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.