Menu navigasi blogger responsive CSS3

CSS Navigasi Responsive sitemap

Menu navigasi adalah hal yang di perlukan sebuah blog untuk mengarahkan seorang pengunjung ke halaman tertentu, buat sobat yang belum memasang ini di blog milik sendiri sekarang saya share caranya dengan tampilan responsive yang bisa menyesuaikan di semua resolusi tampilan. menu ini sederhana, hanya sebagai dasar saja jika ingin lebih menarik silahkan sobat modifikasi atau permak sendiri sesuai dengan keinginan.

untuk memasang menu ini silahkan ikuti langkah yang saya jelaskan di bawah ini dengan teliti agar tidak terjadi kesahan.

demo


  

Pertama tentunya sobat harus masuk ke editor template blogger
sesuah itu pilih pengaturan template dan letakkan css di bawah ini bersama css yang lain atau di atas kode </style>

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-1819code-line:1-1920code-line:1-2021code-line:1-2122code-line:1-2223code-line:1-2324code-line:1-2425code-line:1-2526code-line:1-2627code-line:1-2728code-line:1-2829code-line:1-2930code-line:1-3031code-line:1-3132code-line:1-3233code-line:1-3334code-line:1-3435code-line:1-3536code-line:1-3637code-line:1-3738code-line:1-3839code-line:1-3940code-line:1-4041code-line:1-4142code-line:1-4243code-line:1-4344code-line:1-4445code-line:1-4546code-line:1-4647code-line:1-4748code-line:1-4849code-line:1-4950code-line:1-5051code-line:1-5152code-line:1-5253code-line:1-5354code-line:1-5455code-line:1-5556code-line:1-5657code-line:1-5758code-line:1-5859code-line:1-5960code-line:1-6061code-line:1-6162code-line:1-6263code-line:1-6364code-line:1-6465code-line:1-6566code-line:1-6667code-line:1-6768code-line:1-6869code-line:1-6970code-line:1-7071code-line:1-7172code-line:1-7273code-line:1-7374code-line:1-7475code-line:1-7576code-line:1-7677code-line:1-7778code-line:1-7879code-line:1-7980code-line:1-8081code-line:1-8182code-line:1-8283code-line:1-8384code-line:1-8485code-line:1-8586code-line:1-8687code-line:1-8788code-line:1-8889code-line:1-8990code-line:1-9091code-line:1-9192code-line:1-9293code-line:1-9394code-line:1-9495code-line:1-9596code-line:1-9697code-line:1-9798code-line:1-9899code-line:1-99100code-line:1-100101code-line:1-101102code-line:1-102103code-line:1-103104code-line:1-104105code-line:1-105106code-line:1-106107code-line:1-107108code-line:1-108109code-line:1-109110code-line:1-110111code-line:1-111112code-line:1-112113code-line:1-113114code-line:1-114115code-line:1-115116code-line:1-116117code-line:1-117118code-line:1-118119code-line:1-119120code-line:1-120121code-line:1-121122code-line:1-122123code-line:1-123124code-line:1-124125code-line:1-125126code-line:1-126127code-line:1-127128code-line:1-128129code-line:1-129130code-line:1-130131code-line:1-131132code-line:1-132/* --DB Menu Navigation -- */
.db-art-menu {
 width:100%;
 padding:0 auto;
 margin:0 auto;
}
#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: #333;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #222;
    display: none;
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width: 96%;
}
#nav > li {
    border-bottom: 5px solid transparent;
    float: left;list-style:none;
    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;list-style: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;
}

/* db responsive rules */
@media all and (max-width : 1024px) {
    #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;
    }
}

untuk memasang menunya silahkan copy dan letakkan kode di bawah ini di mana saja yang sobat inginkan, tapi biasanya menu navigasi seperti ini bisa di area header di atas kode </header> atau di bawahnya.

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-2021code-line:2-2122code-line:2-2223code-line:2-2324code-line:2-2425code-line:2-2526code-line:2-2627code-line:2-2728code-line:2-2829code-line:2-2930code-line:2-3031code-line:2-3132code-line:2-3233code-line:2-3334code-line:2-3435code-line:2-3536code-line:2-3637code-line:2-3738code-line:2-3839code-line:2-3940code-line:2-4041code-line:2-4142code-line:2-4243code-line:2-4344code-line:2-4445code-line:2-4546code-line:2-46<div class='db-art-menu'>
            <ul id="nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">menu1</a>
                    <span id="s1"></span>
                    <ul class="subs">
                        <li><a href="#">SUB1</a>
                            <ul>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                            </ul>
                        </li>
                        <li><a href="">SUB2</a>
                            <ul>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#s2">menu2</a>
                    <span id="s2"></span>
                    <ul class="subs">
                        <li><a href="#">SUB1</a>
                            <ul>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                            </ul>
                        </li>
                        <li><a href="#">SUb2</a>
                            <ul>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                                <li><a href="#">link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">menu3</a></li>
                <li><a href="#">menu4</a></li>
            </ul>
</div>

untuk sobat yang ingin menu ini tampil melayang tambahkan saja position:fixed; pada css menu ini sehingga menjadi seperti berikut:

.db-art-menu {
 width:100%;
 position:fixed;
}

dan letakkan kode html menunya di bawah tag pembuka body yaitu <body> jangan lupa untuk merubah seluruh link menunya dan simpan hasil perubahan template lalu lihat hasilnya, jika kurang pas di permak lagi sampai srek di hati.

semoga berguna untuk sobat semua...

Artikel Terkait

  • Cara membuat efek page fold dengan css
    Posting ini akan membahas teknik yang digunakan untuk menciptakan efek sudut yang dilipat. lihat gambar dibawah ini, yaitu hasil efek dari menggunakan pseudo-elemen. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligu…
  • CSS untuk widget Popular Post blogger/blogspot
    Dalam posting ini saya sajikan tujuh gaya untuk posting populer widget di blogger. Pertama, Anda perlu menambahkan widget populer posting di blog. Untuk itu, Pergi ke Tata Letak> Tambah Gedget, lalu pilih populer Post widget. Kemudian hapus centang thumbnail/gambar dan tampilkan cuplikan. Jika Anda sudah memiliki posting widget populer hany…
  • 4 Style CSS widget Label Blogger
    Berikut ini beberapa modifikasi label default blogger. Anda hanya mendownload kode CSS yang diberikan berikut dan terapkan pada editing template Anda sebelum ]]></b:skin> atau </style> 1. Label Blog Style One .label-size { float:left; margin:0 0 7px 20px; position:relative; font-family:'Helvetica Neue',Helvetica,A…
  • CSS widget popular post Blogger
    Pada kali ini Saya mencoba modifikasi popular post menjadi keren dan warna - warni dengan memanfaatkan CSS Pseudo Element dan nth-child sehingga tampilannya menjadi lebih menarik. Silakan masuk pada akun blogger Anda Kemudian Tambahkan Gadget dan pilih Entri Populer, lalu atur agar popular post hanya menampilkan judul saja. langkah di atas d…
  • Bullet otomatis dan manual dengan css di post
    Bullet default dari blogger memang tidak terlihat begitu jelek di posting namun para blogger memodifikasinya agar lebih terlihat unik dan berbeda dari yang lainnya dengan menambahkan icon yang bervatif. Selain menambah kesan postingan unik bullet hasil modifikasi ini juga menambah tampilan posting lebih cantik dan tidak terlihat biasa saja se…
  • Trik mendesain friendly template
    Blogger telah menyediakan tool yang baik untuk menyesuaikan template yang disebut Template Designer Blogger. Menggunakan Blogger Template Designer Anda dapat mengubah gaya font, warna, lebar template, dan latar belakang template. Blogger Template Designer menyediakan cara mudah mengubah template dengan Anda masuk ke dalam Blogger Template Desi…

2 komentar

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...