Sercan Aslan Kişisel Blog
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