Sercan Aslan
Altın 4 Altın IV
Html5 & Css3

Sadece CSS Kullanarak Yatay Açılır Menü

Sadece css kullanılarak açılır menü yapımı için internette epey kaynak var aslında. Ben videolu olarak olayın mantığını anlamanız açısından biraz daha basit bir anlatım yaptım. Öncelikle yatay açılır menü yapımını anlatacağım. Bir sonraki yazımda ise dikey açılır menü yapımından bahsedeceğim. Zaten mantık olarak aynı sadece ufak tefek css farklılıkları olacak.

:hover Verildiği css elemanına mouse ile üzerine gelindiği anı yakalamak için kullanılır. En basit tanımıyla div elemanımızın üzerine mouse ile geldiğimizde görsel değişiklik yapmamızı sağlar. Biz bu yazıda açılır menü yapmak için kullanacağız.

ul li:hover ul Bu yazıda böyle bir kullanım olacak. ul elemanının içindeki li elemanına mouse ile gelindiğinde, bir alttaki ul elemanını yakala ve uygula anlamına gelir.

Html kısmında kullandığım kodlar

<html lang="tr">
<head>
    <title>LOREM IPSUM</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="LOREM IPSUM">
    <meta name="author" content="SitePoint">
    <meta name="keywords" content="LOREM IPSUM">
    <link type="text/css" rel="stylesheet" href="styles2.css">
</head>
<body>

    <div class="menu">
        <ul>
            <li><a href="" title="">Home</a></li>
            <li><a href="" title="">Links</a>
                <ul>
                    <li><a href="" title="">Link 1</a></li>
                    <li><a href="" title="">Link 2</a></li>
                    <li><a href="" title="">Link 3</a></li>
                </ul>
            </li>
            <li><a href="" title="">About Us</a></li>
            <li><a href="" title="">Contact</a></li>
        </ul>
    </div>
    
</body>
</html>

CSS kısmında kullandığım kodlar

* {
	margin:0;
	padding:0
}
body {
	margin:0;
	padding:0
}

.menu {
	width:500px;
	margin:0 auto;
	margin-top:10px;
	background:#777
}
.menu ul {
	display:block;
	margin:0;
	text-align:center;
	padding:0
}
.menu ul li {
	list-style:none;
	display:inline-block
}
.menu ul li a {
	display:block;
	background:#777;
	color:#fff;
	font-size:12px;
	padding:20px 20px;
	text-decoration:none;
	font-family: Arial
}
.menu ul li a:hover {
	background:#666
}
.menu ul li ul {
	display:none;
	position:absolute;
	background:#666;
	width:200px
}
.menu ul li ul li {
	display:block
}
.menu ul li:hover > a {
	background:#666
}
.menu ul li ul li a {
	background:#666;
	text-align:left
}
.menu ul li ul li a:hover {
	background:#555
}
.menu ul li:hover ul {
	display:block
}

Demoİndir

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sonraki Başlık

Sadece css kullanılarak açılır menü yapımı için internette epey kaynak var aslında. Ben vid

09:30 // 0 Yorum Karanlığa Işık Tut

Videoda nth-child ve benzeri birkaç css seçicisinden bahsettim. Benim sık sık kullandığım se

09:27 // 0 Yorum Karanlığa Işık Tut

Sadece css kullanılarak açılır menü yapımı için internette epey kaynak var aslında. Ben vid

09:24 // 0 Yorum Karanlığa Işık Tut

İzlediğim başarı hikayelerinin konu edildiği bazı filmleri sizler için derledim. 10 adet film

09:17 // 0 Yorum Karanlığa Işık Tut