As Salam, Kali ini M'Rie nak kongsikan dengan anda semua cara nak buat "Dropdown Navigation Menu". Tutorial bagi "Dropdown Navigation Menu" ini M'Rie ambil codingnya dari template asal iaitu "MagzEvo". Anda boleh sahaja search template berkenaan di Google dengan menggunakan keyword "MagzEvo".
Okay tak usahlah kita bercerita panjang. Jom kita teruskan dengan cara-cara nak masukkan coding-coding dibawah ke dalam template kita.
Okay tak usahlah kita bercerita panjang. Jom kita teruskan dengan cara-cara nak masukkan coding-coding dibawah ke dalam template kita.
- Macam biasalah, kenalah Log In ke dashboard blog terlebih dahulu.
- Pilih Template > Edit HTML > Proceed (Interface Baru).
- Pilih Design > Edit HTML (Interface Lama).
- Kemudian klik "Expand Widget Templates".
- Kemudian sila cari code ]]></b:skin> dengan menggunakan butang "Ctrl + F" di keyboard anda. Bila dah jumpa code berkenaan. Sila copy & paste code dibawah sebelum/diatas code berkenaan.
CSS Code MagzEvo Dropdown Navigation Menu
Jika anda ingin menukar "Menu Navigation" lama anda dengan "Dropdown Navigation Menu" yang di dalam tutorial ini. Anda perlulah menggantikan code CSS Menu di dalam template anda dengan code CSS Dropdown Navigation Menu di bawah.
.main-navigation {
margin: 0;
height:44px;
clear: both;
width: 950px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_zpGcCOpy4mxUc-ul8iWeeer7fUSqacGD3RhRhezGiwXzuJL6c8og5I-4LJfhz_Z-UfGCOoIyES764CWQlF4rzBQgjzWTECaDeGWvT3DMmhbqUKHZSDAcX-Wd22S1uofBcP8uAvArFLw/s0/navi.png) repeat-x top;
}
.main-navigation a {
color: #fff;
}
.main-navigation ul ul li {
background: #74caec;
}
.sf-menu, .sf-menu * {
padding:0;
list-style:none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position:absolute;
top:-999em;
width:15em;
}
.sf-menu ul li {
width:100%;
}
.sf-menu li:hover {
visibility:inherit;
}
.sf-menu li {
float:left;
position:relative;
margin:0;
}
.sf-menu a {
display:block;
position:relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left:0;
top:44px; /* match top ul list item height */
z-index:99;
}
.sub-navigation .sf-menu li:hover ul,
.sub-navigation .sf-menu li.sfHover ul {
top:2.1em;
left:0;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left:10em;
top:0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top:-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left:10em;
top:0;
}
.sf-menu {
float:left;
margin:0;
padding: 0;
}
.sf-menu a {
display: block;
margin:0;
padding: 15px 15px;
font-size: 12px;
letter-spacing: 0px;
color: #fff;
text-transform: uppercase;
font-weight: bold;
border:1px solid transparent;
text-decoration:none;
}
.sf-menu li li a {
border: 0;
}
.main-navigation .sf-menu li:hover, .main-navigation .sf-menu li.sfHover,
.main-navigation .sf-menu a:focus, .main-navigation .sf-menu a:hover, .main-navigation .sf-menu a:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_zpGcCOpy4mxUc-ul8iWeeer7fUSqacGD3RhRhezGiwXzuJL6c8og5I-4LJfhz_Z-UfGCOoIyES764CWQlF4rzBQgjzWTECaDeGWvT3DMmhbqUKHZSDAcX-Wd22S1uofBcP8uAvArFLw/s0/navi.png) repeat-x bottom;
-webkit-box-shadow: 0 0 10px #000;border-radius:5px;
color:#000;
}
.sf-menu a.sf-with-ul {
padding-right: 2.25em;
min-width: 1px;
}
.sf-sub-indicator {
position: absolute;
display: block;
right: .75em;
top: .90em;
width: 10px;
height: 10px;
text-indent: -999em;
overflow: hidden;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl_SPiNVxaplaVbmCuN1VqMj5fD-oq_qCgYr0uc1lnpT4hQYDidqBXB7xMwlD4PV_H-QwWLZh75w8wssx3dg2EPoTrgGyHnlugyM8EKpXaZM0U8SkGEmTNArTTdVToKOehdZBHsgzjr9g/s0/arrows-ffffff.png) no-repeat -10px -100px;
}
.sub-navigation .sf-sub-indicator {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNMpAwK6pc9pXiYc7JWHcDYiJmvFJ6PpZ_IJOoIjjMalc-7eMs1J9qKF5ypM4P_iF7_pDHLA0ExW-JxQ-7diPeteLQmUJ3SDJo_luBc5JMmzCgyzNqbp7ZkaaYiVF97HXKL9belfz9V-4/s0/arrows-000000.png) no-repeat -10px -100px;
}
a > .sf-sub-indicator {
top:1.3em; background-position: 0 -100px;
} .sub-navigation a > .sf-sub-indicator {
top: .4em; background-position: 0 -100px;
} a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
background-position: -10px -100px;
}
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }
.sub-navigation .sf-menu ul .sf-sub-indicator { background-position: -10px 0; top: .65em; }
.sub-navigation .sf-menu ul a > .sf-sub-indicator { background-position: 0 0; top: .65em; }
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
background-position: -10px 0;
}
Arahan untuk customize CSS Code
Okay, sekarang kita teruskan dengan langkah-langkah ataupun arahan untuk customize code CSS di atas. Manalah tahukan anda nak tukar apa-apa yang patut, supaya "Dropdown Menu Navigation" anda tu nampak lagi gempak kan.
- Code width:950px yang berwarna merah tu. Anda boleh ubah angka 950 mengikut kelebaran main wrapper blog anda. Ataupun anda boleh sahaja tukar 950px kepada perkataan "auto".
- Manakala code background yang berwarna biru itu. Anda boleh tukar dengan url gambar background anda sendiri kalau anda mahu. Ini kerana url image background tu sudah disetkan dengan background berwarna biru. Anda juga boleh tukar ianya kepada kod warna, tapi anda perlu delete dari perkataan url sampailah perkataan top dan gantikan dengan kod warna. Sila rujuk sini untuk memilih kod warna yang anda inginkan.
- Okay yang berwarna pink itu pula adalah code background bagi hover menu. Kira bila kita halakan mouse ke menu yang dipilih. Akan kelihatan seperti background lain disitu. Anda cuma perlu merujuk arahan customize CSS di point nombor "2". Anda boleh tukar ianya mengikut citarasa anda.
HTML Code MagzEvo Dropdown Navigation Menu
Okay dibawah ini pula adalah code HTML bagi "Dropdown Navigation Menu ". Anda dinasihatkan untuk melakukan proses meng-edit code HTML di bawah didalam Word Pad ataupun Note Pad terlebih dahulu. Ini kerana ada beberapa bahagian yang perlu anda ubah mengikut citarasa anda.
Coding HTML di bawah ini anda perlu letakkan selepas code <div id='content-wrapper'>. Ataupun anda boleh gantikan code HTML yang sama dalam template anda dengan code yang dibawah ini.
Arahan untuk customize code HTML
- Perkara pertama yang anda perlu buat adalah mengubah simbol [ # ] kepada link ataupun url yang anda mahukan bila pengguna mengklik sesuatu menu.
- Manakala Title tu, tajuk ataupun nama menu yang anda mahukan.
- Main Menu pula adalah tajuk utama bagi sub menu.
- Manakala sub menu tu tajuk ataupun nama sub menulah.
Okay dah siap. Kalau ada masalah, jangan segan-segan untuk bertanya. Drop your comment kat bawah ni ya. M'Rie akan membantu jika mampu. Sekian, Terima Kasih.
Post a Comment