Cara Membuat Menu Navigasi Responsive Di Blog
12 Oktober 2019
3 Komentar
![]() |
Menu Navigasi Horizontal Sederhana |
Cara Membuat Menu Navigasi Horizontal Responsive, menu navigasi yang biasa kita temukan kebanyakan menggunakan navigasi drop down tetapi pada kesempatan kali ini saya akan memberikan cara membuat menu navigasi horizontal dan melakukan scroll kesamping kanan untuk melihat menu yang terdapat pada navigasi tersebut.
Menu navigasi horizontal ini dibuat oleh sesepuh blogger ternama yaitu Mba Igniel, menu navigasi ini sangat jarang sekali digunakan oleh para kalangan blogger karena kebanyakan menggunakan menu navigasi drop down, menu navigasi ini bukan hanya horizontal saja tetapi menu navigasi ini bisa kalian geser ke samping (scroll kesamping) untuk melihat menu lainnya yang terdapat pada menu navigasi horizontal ini.
Bagi beberapa orang yang baru akan mengira bawahsannya menu navigasi horizontal ini terpotong padahal tidak, hanya perlu mengscrool kesamping.
Cara Membuat Menu Navigasi Horizontal Responsive
Menu Navigasi Horizontal ini sangat sederhana tetapi memiliki tampilan yang menarik, ok baiklah bagi kalian yang ingin menyicipi menu navigasi horizontal ini kalian bisa ikuti tutorial dibawah ini.
- Pertama kalian buka blog milik kalian kemudian masuk ke bagaian tema => edit html, letakan kode dibawah ini pada tempatnya, biasanya pada bagaian <headaer>
Jangan Lupa Untuk Menghapus Kode Menu Navigasi Yang Terdapat Pada Template Kalian, Agar Tidak Terjadi Bentrok.
<!-- Navigation Menu Horizontal Scroll by igniel.com -->
<div class="ignielHorizontal">
<ul>
<li><a href="#" title="Download">Download</a></a></li>
<li><a href="#" title="Tutorial">Tutorial</a></li>
<li><a href="#" title="Video">Video</a></li>
<li><a href="#" title="Subscribe">Subscribe</a></li>
<li><a href="#" title="HTML5">HTML5</a></li>
<li><a href="#" title="CSS3">CSS3</a></li>
<li><a href="#" title="Javascript">Javascript</a></li>
<li><a href="#" title="Make Money Online">Make Money Online</a></li>
<li><a href="#" title="Study Case">Study Case</a></li>
</ul>
</div>
- Kemudian Simpan kode dibawah ini diantara tag <body> dan </body> atau kalian bisa simpan diatas kode </style>
/* Navigation Menu Horizontal Scroll by igniel.com */
.ignielHorizontal ul {
background-color: #673ab7; /* Warna background menu */
max-width: 100%; /* Lebar maksimal menu */
overflow-x: auto;
}
.ignielHorizontal {
color: #fff;
line-height: 0px;
overflow: hidden;
}
.ignielHorizontal a {
font-size: 14px;
color: #fff;
text-decoration: none;
padding: 10px 13px;
line-height: 1.5em;
display: block;
}
.ignielHorizontal a:hover {
background-color: rgba(0,0,0,.25);
color: #fff;
text-decoration: none;
}
.ignielHorizontal ul, .ignielHorizontal li {
list-style: none;
display: inline-block;
white-space: nowrap;
margin: 0px;
padding: 0px;
}
@media screen and (max-width: 480px){
.ignielHorizontal a {
font-size: 13px;
padding: 8px 11px;
}
}
@media screen and (max-width: 360px){
.ignielHorizontal a {
font-size: 12px;
padding: 7px 10px;
}
Silahkan kalian ganti # dengan Url yang akan kalian gunakan.
- Kemudian Save.
Sebenernya Menu Navigasi Horizontal ini digunakan pada template Textrim (template yang saya gunakan saat ini) sang pembuat templatenya juga Mba Igniel pemilik situs Igniel.com dan Arlina DZGN.
Klik reslut dibawah ini untuk melihat demonya.
Ok selesai sudah pembahasan mengenai Cara Membuat Menu Navigasi Horizontal Responsive, barang kali ada yang masih bingung bisa kalian tanyakan pada kolom komentar dibawah.
Menu buatan Igniel tersebut mengadopsi contoh menu dari w3school, memang sangat responsive karena kita tdk perlu takut perubahan ukuran layar
BalasHapusMakasih penjelasannya 👏
HapusIam Adeeva Ameera.. you can call me Adeeva.. Iam like watching movies on cinema so i have a blog about Movies #jadwal21myid.
BalasHapusbioskop 21
jadwal cinema xxi
nonton film online - lk-21.info
watch movies online - bioskop-21.me
lowongan kerja cpns / asn / bumn terbaru - lokerja.pw