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>

Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

Pastekan kode di atas didalamnya
Simpan Gadget...

Silahkan ganti URL/Link yang disorot warna orange dengan URL/Link anda
Ganti Menu dan Submenu sesuai dengan Menu dan submenu di blog anda

HAPPY BLOGGING...

7 komentar:

Sunandar13 Mei 2013 pukul 10.06
nice info gan :)
kapan2 mampir http://nandarious.blogspot.com/
BalasHapus
Balasan
Warung Technology13 Juli 2013 pukul 21.39
nice post gan!!!! ku tunggu kunjungan balikmu http://gtips-trick.blogspot.com/
BalasHapus
Balasan
jalupangna17 Juli 2013 pukul 06.05
Bawaan default sub menunya yang saya dapat dari web luar spt itu..
BalasHapus
Balasan
Anonim20 Oktober 2013 pukul 11.34
kok tidak responsif mas
BalasHapus
Balasan

Tambahkan komentar

5 Mei 2013

Cara membuat menu responsive dengan CSS3 di blog

7 komentar: