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

 

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 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ı 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>


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


.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.

Yorum Gönder

Daha yeni Daha eski

İletişim