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

Sadece CSS Kullanarak Dikey Açılır Menü Yapımı

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 yapmaya çalıştım. Bir önceki yazılarımdan birinde yatay açılır menü yapımını anlatmıştım. Bu yazımda ise dikey açılır menü yapımını göstereceğim. Elbette javascript veya jquery’e başvurmadan yapacağız bu işlemi. Sadece css kullanarak.

:hover Verildiği css elemanının 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

<!doctype html>
<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="style.css">
</head>
<body>

<div class="menu-container">
    <div class="menu">
        <ul>
            <li><a href="" title="">Home</a></li>
            <li><a href="" title="">About Us</a></li>
            <li><a href="" title="">Company</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="">Contact</a></li>
        </ul>
    </div>
    
    <div class="menu2">
        <ul>
            <li><a href="" title="">Home</a></li>
            <li><a href="" title="">About Us</a></li>
            <li><a href="" title="">Company</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="">Contact</a></li>
        </ul>
    </div>
    
    <div class="cle"></div>
</div>
    
</body>
</html>

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

body {
	margin:0;
	padding:0
}
.cle {
	clear:both
}
.menu-container {
	width:700px;
	margin:0 auto
}
.menu {
	float:left;
	background:#777;
	width:300px;
	margin-top:10px
}
.menu ul {
	display:block;
	margin:0;
	padding:0
}
.menu ul li {
	list-style:none;
	display:Block
}
.menu ul li a {
	color:#fff;
	text-decoration:none;
	font-size:12px;
	font-family: Arial;
	background:#777;
	display:Block;
	padding:20px;
	border-bottom:1px solid #888
}
.menu ul li a:hover {
	background:#666
}
.menu ul li ul {
	display:none
}
.menu ul li:hover ul {
	display:block
}
.menu ul li ul li a {
	padding:20px 20px 20px 30px;
	background:#666
}
.menu ul li ul li a:hover {
	background:#555
}
.menu ul li:hover > a {
	background:#666
}

/* MENU 2 */

.menu2 {
	float:right;
	background:#777;
	width:300px;
	margin-top:10px
}
.menu2 ul {
	display:block;
	margin:0;
	padding:0
}
.menu2 ul li {
	list-style:none;
	display:Block
}
.menu2 ul li a {
	color:#fff;
	text-decoration:none;
	font-size:12px;
	font-family: Arial;
	background:#777;
	display:Block;
	padding:20px;
	border-bottom:1px solid #888
}
.menu2 ul li a:hover {
	background:#666
}
.menu2 ul li ul {
	display:none;
	position:absolute;
	width:200px;
	margin:-56px 0 0 300px
}
.menu2 ul li ul li a {
	background:#666
}
.menu2 ul li ul li a:hover {
	background:#555
}
.menu2 ul li:hover > a {
	background:#666
}
.menu2 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

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