Sadece CSS Kullanarak Responsive Menü Yapımı

#1
Sitelerimizde sırf menüler için JS kütüphanesini dahil ediyoruz, buda sayfanın yükünü oldukça fazla arttırmaktadır. Aşağıdaki CSS kodlarını ve menü linklerini kendinize düzenleyerek kullanabilirsiniz.

CSS:
/*Strip the ul of padding and list styling*/
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: absolute;
}

/*Create a horizontal list with spacing*/
li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

/*Style for menu links*/
li a {
    display:block;
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fff;
    background: #2f3036;
    text-decoration: none;
}

/*Hover state for top level links*/
li:hover a {
    background: #19c589;
}

/*Style for dropdown links*/
li:hover ul a {
    background: #f3f3f3;
    color: #2f3036;
    height: 40px;
    line-height: 40px;
}

/*Hover state for dropdown links*/
li:hover ul a:hover {
    background: #19c589;
    color: #fff;
}

/*Hide dropdown links until they are needed*/
li ul {
    display: none;
}

/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: none;
}

/*Prevent text wrapping*/
li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #19c589;
    text-align: center;
    padding: 10px 0;
    display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}


/*Responsive Styles*/

@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    ul {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    li {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul li, li a {
        width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
}
HTML:
<label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li>
            <a href="#">About &#65516;</a>
            <ul class="hidden">
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">What We Do</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Portfolio &#65516;</a>
            <ul class="hidden">
                <li><a href="#">Photography</a></li>
                <li><a href="#">Web &amp; User Interface Design</a></li>
                <li><a href="#">Illustration</a></li>
            </ul>
        </li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
Kaynak: https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/
 

Kamal Balayev

Alışma Sürecinde
#2
@return , şimdi sırf menü için js kütüphanesi eklenmiyor. 99% sitenin yapımı zamanı jQuery kütüphanesi kullanılıyor. Çünkü günümüzde kullanılan pluginlerin hemen hemen hepsi jQuery talep ediyor.

Diğer taraftan bu paylaşmış olduğun example yalnız css ile ola bilir ama kullanıcı deneyimi bakımından ve tasarım bakımından iyi değil. Bu konuda benim paylaştığım örneğe bak. Onunla bu bir mi sence? Kullanıcının dikkatini hangisi daha çok çeker? :)
 
#3
@return , şimdi sırf menü için js kütüphanesi eklenmiyor. 99% sitenin yapımı zamanı jQuery kütüphanesi kullanılıyor. Çünkü günümüzde kullanılan pluginlerin hemen hemen hepsi jQuery talep ediyor.

Diğer taraftan bu paylaşmış olduğun example yalnız css ile ola bilir ama kullanıcı deneyimi bakımından ve tasarım bakımından iyi değil. Bu konuda benim paylaştığım örneğe bak. Onunla bu bir mi sence? Kullanıcının dikkatini hangisi daha çok çeker? :)
Burda @return hangisi daha çok dikkat çeker diye bir iddaa da bulunmamış, Bence gayet güzel ve işe yarar bir paylaşım yapmış, Ellerine sağlık @return hocam.

Dipnot: forum henüz yeni yeni üye toplama aşamasındayken yorumlarımız yıkıcı değil, yapıcı olsun. Lütfen bu konuda dikkat gösterelim.
 
#7
@Benabdullah psikolojimi bozdun, profil resminde bulunduğun yerde eski kız arkadaşımında fotoğrafı vardı. Sana baktıkça şimdi onu hatırlayacağım :)

@Kamal Balayev paylaşımınız için teşekkürler, JS hiç bir zaman kullanmamaya özen gösteriyorum. CSS ile kendime göre çeki düzen verince ortaya güzel bir örnek çıkıyor. Önemsediğim sitelerimin page speed skoru %99 (%1'lik ise Google sayaçlarındaki JS'ler.) Ama yine de teşekkürler .