ejderya
Hectopat
Daha fazla
- Cinsiyet
- Erkek
- Meslek
- Front End Developer
Canlı önizle: CSS3 Açılır Nav Menü
Kodlar;
CSS kodları;
Kodlar;
Kod:
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Css menü denemesi #BGR</title>
<link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
</head>
<body>
<div id="kapsayici">
<ul id="menu">
<li class="home"><i class="fa fa-home fa-2x orta" aria-hidden="true"></i></li>
<li><a href="#">İnsanlar</a></li>
<li><a href="#">Hayvanlar</a></li>
<li class="menu2"><a href="#">Ağaçlar<span><i class="fa fa-angle-down" aria-hidden="true"></i></span></a>
<ul id="menu2">
<li><a href="#">Çam</a></li>
<li><a href="#">Meşe</a></li>
<li class="menu3"><a href="#">Kavak<span><i class="fa fa-angle-right" aria-hidden="true"></i></span></a>
<ul id="menu3">
<li><a href="#">Hormonlu</a></li>
<li><a href="#">Hormonsuz</a></li>
</ul>
</li>
<li><a href="#">İğde</a></li>
</ul>
</li>
<li><a href="#">Çiçekler</a></li>
<li><a href="#">Robotlar</a></li>
<li><a href="#">Böcekler</a></li>
</ul>
</div>
</body>
</html>CSS kodları;
Kod:
*{margin:0; padding:0}
body{
background-color:#ecf0f1;
padding-top:100px;
}
#kapsayici{
width:960px;
margin:0 auto;
}
ul#menu{
list-style:none;
}
ul#menu li{
float:left;
width:150px;
height:50px;
background-color:#f1c40f;
border-left:1px solid #000;
border-bottom:3px solid #000; position:relative;
}
ul#menu li:first-child{
border-left:none;
}
ul#menu li a{
text-decoration:none;
color:#000;
font-family: 'Yanone Kaffeesatz', sans-serif;
font-size:25px;
text-align:center;
line-height:50px;
display:block;
border-bottom:0px solid #000;
}
ul#menu li:hover > a{
border-bottom:3px solid #d35400; color:#d35400;
transition-property: color;
transition-duration:0.5s;
box-shadow: 0 0 5px #000;
}
li.menu2 ul#menu2{
list-style:none;
}
li.menu2 ul#menu2 li{
border:none;
display:none;
transition-property: display; transition-duration:0.5s;
}
li.menu2 ul#menu2 li a:hover{
box-shadow:none;
border:none;
}
li.menu2:hover ul#menu2 li{
display:block;
}
li.menu3:hover ul#menu3{
display:block;
position:absolute;
top:0;
left:150px;
}
li.menu3 ul#menu3 {
display:none;
}
ul#menu li.home{
width:50px;
height:50px;
display:block;
}
i.orta { width:50px;
height:50px;
padding:9px;
display:block;
}
span{
float:right;
padding-right:8px;
}
Son düzenleyen: Moderatör:
