Wawasan spiritual dan blogging: Cara membuat menu responsive dengan CSS3 di blog

Hari ini saya akan memberitahu cara membuat menu navigasi responsif dengan hanya menggunakan CSS3. Mengapa responsif? Saya pikir itu adalah penting dan esensial. Seperti yang Anda ketahui, saat ini, banyak orang browsing di internet melalui perangkat mobile (seperti ipad, iphone atau android). Hal yang terpenting bahwa orang-orang browsing di internet menggunakan perangkat ponsel dapat menavigasi website/blog Anda. Ada Beberapa solusi yang dapat Anda temukan di internet menawarkan multiple menu yang menggunakan jquery atau javascript. Tapi hari ini saya akan memberikan solusi kepada anda tanpa menggunakan javascript.

View Demo

KODE CSS

* {
    margin: 0;
    padding: 0;
}
html {
    background-color: #fff;
    height: 100%;
}
body {
    color: #333333;
    font: 0.75em/1.5em Arial,sans-serif;
}
.container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 96%;
}

/* common and top level styles */
#nav span {
    display: none;
}
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: #F5F5F5;
    border-bottom: 5px solid #333333;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    width: 98%;
}
#nav ul.subs {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #333333;
    display: none;
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width: 96%;
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: left;
    margin-bottom: -5px;
    text-align: left;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
#nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
#nav > li > a {
    color: #333333;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #F55856;
    color: #FFFFFF;
}
#nav li.active > a {
    background-color: #333333;
    color: #FFFFFF;
}

/* submenu */
#nav li:hover ul.subs {
    display: block;
}
#nav ul.subs > li {
    display: inline-block;
    float: none;
    padding: 10px 1%;
    vertical-align: top;
    width: 33%;
}
#nav ul.subs > li a {
    color: #777777;
    line-height: 20px;
}
#nav ul li a:hover {
    color: #F55856;
}
#nav ul.subs > li > a {
    font-size: 1.3em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
#nav ul.subs > li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0s;
    -ms-transition: padding 150ms ease-out 0s;
    -o-transition: padding 150ms ease-out 0s;
    -webkit-transition: padding 150ms ease-out 0s;
    transition: padding 150ms ease-out 0s;
}
#nav ul.subs > li li:hover {
    padding-left: 15px;
}

/* responsive rules */
@media all and (max-width : 980px) {
    #nav > li {
        float: none;
        border-bottom: 0;
        margin-bottom: 0;
    }
    #nav ul.subs {
        position: relative;
        top: 0;
    }
    #nav li:hover ul.subs {
        display: none;
    }
    #nav li #s1:target + ul.subs,
    #nav li #s2:target + ul.subs {
        display: block;
    }

#nav ul.subs > li {
        display: block;
        width: auto;
    }
}

LANGKAH-LANGKAHNYA SEBAGAI BERIKUT:

Silahkan masuk ke akun blogger anda kemudian -> Klik Drop Down Menu

Kemudian pilih -> Template -> Backup template anda terlebih dahulu -> Edit HTML

Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan pencarian

Pastekan kode CSS di atas, tepat diatas tag ]]></b:skin>

Simpan template...

KODE HTML

<link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="container">
            <ul id="nav">
                <li><a href="#">Home</a></li>
              <li><a href="#s1">All about blog</a>
                    <span id="s1"></span>
                    <ul class="subs">
                        <li><a href="#">blogging</a>
                            <ul>
                                <li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">tips dan triks blog</a></li>
                                <li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
                                <li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery</a></li>
                                <li><a href="http://jalu-pangna.blogspot.com/search/label/widget">Gadget</a></li>
                            </ul>
                        </li>
                        <li><a href="">blogging</a>
                            <ul>
                                <li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">tips dan triks blog</a></li>
                                <li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
                                <li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="active"><a href="#s2">All about spiritual</a>
                    <span id="s2"></span>
                    <ul class="subs">
                        <li><a href="#">Spiritual</a>
                            <ul>
                                <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">Wawasan spiritual</a></li>
                                <li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">suluk</a></li>
                                <li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Spiritual</a>
                            <ul>
                                <li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">Wawasan spiritual</a></li>
                                <li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">suluk</a></li>
                                <li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="http://jalu-pangna.blogspot.com/p/blog-page_14.html">Site map</a></li>
                <li><a href="http://jalu-pangna.blogspot.com/2013/05/cara-membuat-menu-responsive-dengan.html">Kembali ke tutorial</a></li>
            </ul>
        </div>