Hızlı Arama Robotu
Hızlı Arama Robotu
CSS Menu Yapımı

CSS Menu Yapımı

Merhaba Arkadaşlar,
Hazır olarak yaptığım çalışmalarda kullandığım “CSS” Menüyü sizle paylaşmak istiyorum.

Hover özelliği ve zamanlama mevcuttur.

<div class="header">
    <div class="logo">
<span style="font:700 32px Arial; line-height: 80px; color:White;">Logom</span> </div>
 

// bu alana isterseniz kendiniz logo koyabilirsiniz. Ben sadece text yazısıyla font verdim.

<div class="menu">

<ul>
    <li><a href="#"><i class="fa fa-futbol-o" aria-hidden="true"></i> Menu</a></li>
    <li><a href="#"><i class="far fa-basketball-ball"></i> Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <div class=sub-menu>
    <li class="sub-menu1-ac"><a href="#">Menu 7 <i class="fa fa-angle-down" aria-hidden="true"></i></a>
    <ul class="sub-menu1">
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
    </ul>
    
    </li>
</div>

</ul>

</div></div>

Örnek bir açılır menu bıraktım; 4 adet açılır menuyü siz kendinize göre güncelleyebilirsiniz.

Css kodları aşağıda.

*{

    padding:0;
    margin:0;
    text-decoration: none;
    list-style-type:none;
    box-sizing: border-box;

}

** burada sıfırlama yapılması gerekiyor

.header{
    background:rgb(6, 86, 191);
    height:80px;
    line-height: 50px;
    display: flex;
    justify-content: space-around;
    margin-top:20px;
    box-shadow:1px 1px 1px black;
}

.logo img{
height: 70px;
}
menu {
    text-align: left; 
margin-top:px;
    
}

.menu ul {

    display:inline-flex;
    line-height: 60px;    color:white;


}
.menu ul li {
    padding:10px;
    transition:2s;
    color:white;

}
.menu ul li:Hover{
    background:#b2b2b2;

}
.menu ul li a {
    padding:5px;
    color:white;
    text-decoration:none;

}
.sub-menu .sub-menu1{
    display:none;
}
.sub-menu .sub-menu1-ac:hover .sub-menu1 {
display:block;
position:absolute;
}

CSS Menu Yapımı YAPILAN YORUMLAR

Önceki yazıyı okuyun:
New Star Soccer

New Star Soccer 5 indirilmeye hazır. New star soccer yeni bir yıldız doğuyor sıradan bir futbolcu olarak kariyerinize başlayarak adım...

Kapat