Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

Oleh -
This CSS-only dropdown menu is a horizontal substring menu with a circular search bar on the right. Such a menu may be suitable for users who do not need a complex menu or who want to use a menu that requires a lot of scripts and/or images. In addition, installation and configuration are quite simple and, by the way, quite effective.

To see how the CSS dropdown menu works, visit this demo blog .

blogger menu, drop down menu, css menu

If you are using a template available in the Blogger Template Builder, before making any changes, you should consider making the following changes to your template; otherwise, the menu may not display correctly:

On the Blogger clipboard, navigate to the template and click the "Edit HTML" button:


Find the following lines with CTRL + F:

class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

Screenshot

Remove red code.
You can have as many pieces as red ones, delete what you find.

....then find a similar note in your template:
/* Tab
-------------------------------------------------- -----------*/

Delete all the codes you find after this note until you see the heading .

/* Tab
-------------------------------------------------- -----------*/
.tabs-external
The right creator;
Location: relative;
Background: $(tabs.background.color) $(tabs.background.gradient) re-offset 0 0;
BUT

# The .tabs-outer layout.
crowded: visible;
BUT

.tabs-cap-top, .tabs-cap-behe.
Location: Absolute;
Width: 100%;

Upper limit: 1px hard $(tabs.border.color);

BUT

.sheet-top-bottom.
Down: 0;
BUT

.tabs - internal .widget which
Display: online block;

Margin: 0;
Filling: 0.6cm-1.5cm;

Font: $(tabs.font);
Color: $(tabs.text.color);

Upper limit: 1px hard $(tabs.border.color);
Lower limit: 1px hard $(tabs.border.color);
Frame-$ initial difference: 1px hard $(tabs.border.color);
BUT

.tabs-inner .widget li: last child of a
Border trim: 1px hard $(tabs.border.color);
BUT

.tabs-inner .widget li.elect to .tabs-inner .widget li: select
Background: $(tabs.selected.background.color) $(tabs.background.gradient) Repeat-x offset 0-100px;
Color: $(tabs.selected.text.color);
BUT
/* Header
-------------------------------------------------- -----------*/

Then add the code you've switched to (instead of the green code):
# crosscol {z-index: 200; Filling: 0! Important;
#crosscol li: hover { Location: relative;
#crosscol ul li {Filling: 0! Important;
.outfile {z-index: 1;
.sheet .widget ul, .tabs .widget ul { overflow: visible;
Once that's done, we can add our menu.

How to Add Horizontal CSS Dropdown Menu in Blogger

To add a horizontal CSS menu from a submenu to your blog, follow these steps:

Step 1. In Template, go to Edit HTML and click ]]> Paste this CSS code:
/* Horizontal dropdown menu
-------------------------------------------------- -----------*/
# menuper.
Width: 100%; /*Menu width*/
Height: 35px;
Left padding: 14px;
Background: No. 333; /* background color */
border-radius: 10px;
BUT
Table.
padding: 0;
Margin: 0;
List style: nothing;
Height: 35px;
Location: relative;
z-index: 5;
font-family: arial, verdana, sans-serif;
BUT
.Menu whether: pass whether.
Background: no;
BUT
.Menu li.top {screen:block; swim to the left;
.menu a.top_link.
Lock screen
swim to the left;
Height: 35px;
Line height: 34px;
Color: #cc;
Text decoration: No;
font-family: "Verdana", sans-serif;
Font size: 12px; /* Character size */
Font weight: bold;
padding: 0 0 0 12px;
Cursors: pointer;
BUT
.batmenu.top_link span.
swim to the left;
Lock screen
padding: 0 24px 0 12px;
Height: 35px;
BUT
.menu a.top_link span.down.
swim to the left;
Lock screen
padding: 0 24px 0 12px;
Height: 35px;
BUT
.menu li a.top_link: pass, .menu li: pass> a.top_link {color: #fff; BUT
.li menu: pass { location: relative; z-index: 2;
.woolen menu,
.Menu Lee: Hover Ul Ul,
.Lee Menu: Lana Hover Lee: Lana Hover Lana,
.Li menu: Pass Ul Li: Skip Ul Li: Skip Ul Li,
.Menu Lee: Lana Hover Lee: Lana Hover Lee: Lana Hover Lee: Lana Hover Lana
Location: Absolute; Left: -9999 pixels; Top: -9999px; Width: 0; Height: 0; Margin: 0; padding: 0; List style: nothing;

.li menu: past st.
Left: 0;
Height: 35px;
Background: No. 333; /* Subtitle background color */
padding: 3px;
Space: now rap;
Width: 200px;
Height: automatic;
z-index: 3;
BUT
.Menu li: passing ul.sub li.
Lock screen
Height: 30px;
Location: relative;
swim to the left;
Width: 200px;
Font weight: normal;
BUT
.Menu li: passing ul.sub li to.
Lock screen
Height: 30px;
Width: 200px;
Line height: 30px;
Text indent: 5px;
Color: #cc;
Text decoration: No;
BUT
.Menu li.sub li a.fly.
/* Subtitle background color */
Background: URL #333 (http://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif) 185px 10px no repeat;
.Menu li: pass ul.sub li a: pass.
Background: #515151; /* Mouse background color */
Colour: #ffff;
BUT
.Menu li: go ul.sub li a.fly: go, .menu li: go ul li: go > a.hegan.
/*Mouse background*/
background: #646464 url ​​(https://2.bp.blogspot.com/-38QeToUdU48/UWmqpRNO-LI/AAAAAADP4/A4AJhnSm0Fg/s1600/arrow_over.gif) 185px 10px no repeat; Colour: #ffff;

.Menu li: pass ul li: pass ul,
.Menu reading: Floating wool Reading: Floating wool Reading: Floating wool,
.Menu Lee: Hover Wool Lee: Hover Wool Lee: Hover Wool Lee: Hover Wool,
.Menu li: pass ul li: pass ul li: ul li: ul li: ul.
Left: 200px;
Top: -4px;
Background: No. 333; /* Subtitle background color */
padding: 3px;
Space: now rap;
Width: 200px;
z-index: 4;
Height: automatic;
BUT
# Search.
Width: 228px; /* Search box width */
Height: 50px;
swim to the right;
z-index: 2;
Text aligned: middle;
Top margin: 5px;
Right margin: 6 pixels;
/*Search box background*/
Reference: URL (https://2.bp.blogspot.com/-kSPW07r2Ct8/UazXPD9DbfI/AAAAAAADtE/UyopBgIPe-w/s1600/searchBar1.png) is not repeated;
BUT
# Search string.
Top margin: 3 pixels;
border: 0px;
Transparent background;
Text aligned: middle;
BUT


Screenshot
Step 2. After adding the code, click Save Template.

Step 3: Go to Design > click on the gadget link.


Step 4. Select "HTML/JavaScript" and paste the following HTML code into the empty field:


How to customize the navigation menu

- Replace blue and red text with your links and titles.
- If you need more tabs, add a line above them

  • URL link "class="top_link"> Title

    • - If you want to add a tab with subfiles, add the following code:

  • URL link "class="top_link"> Title


    • - And if you want to put a subfile within another subfile, move one line as an orange line and change it to the following code:

  • URL header "class="fly" > subheader header


    • And that's it... now "save" your widget and enjoy this new CSS dropdown menu!

    Postingan populer dari blog ini

    Perbedaan Arti Data, Dashboard dan Report

    Oleh -
    Gambar
    Kita sering mendengar kata data, panel, report, atau report. Kata-kata ini sering kita dengar di berbagai acara, terutama di pertemuan atau rapat. Dalam lingkungan apapun, seperti pekerjaan, pendidikan, RT/RW, atau bahkan di rumah, data atau informasi hampir selalu berbenturan. Beberapa orang mungkin bertanya-tanya apakah data, dasbor, atau laporan memiliki arti yang berbeda, atau apakah ketiga hal tersebut memiliki arti yang sama. Oke, mari kita selesaikan teka-tekinya, berikut perbedaan antara data, dashboard, dan arti laporan, yang telah saya rangkum dalam beberapa artikel di artikel. 1. Data: Menurut artikel Media Data Pembelajaran , data adalah kumpulan informasi yang diperoleh dengan mengamati atau meneliti sumber-sumber tertentu. Data yang diperoleh dapat digunakan sebagai penemuan atau fakta, karena tidak lagi diproses. Selain itu, data diproses melalui penelitian atau pengujian untuk membuatnya lebih kompleks, seperti database atau informasi atau solusi seperti bahan peme
    Baca selengkapnya

    Keyboard Mini Wireless

    Oleh -
    Gambar
    Draadlose mini sleutelbord adalah sleutelbord barbasis computer jadi bukan sleutelbord tableware. Draadlose mini-sleutelbord bentuk mini of sedang diman memiliki fungsi mousenya. The keyboard can be used as a smartphone, Android box, smart TV, laptop, desktop computer. For men and women who are interested in doing business, we are always looking for something that can be used to help you and that you can use this language to help you. You can use Youtube or the Internet. You can use HDMI cable, mini wireless keyboard and remote control keyboard for your laptop or computer. The keyboard can be controlled remotely by Android Box, Smart TV and Smart TV wireless control system, and Andorid Box. Wireless mini keyboard. You can see the address of your message. Description and features of the wireless mini keyboard 92 buttons, 2.4 GHz wireless frequency Touchpad or mouse Fungsi keyboard. Optional: blue beam, green light, background Touchpad DPI. I think the mouse is very emotional.
    Baca selengkapnya

    KUMPULAN MATERI DAN SOAL MATEMATIKA X,XI,XII IPA KURIKULUM 2013 EDISI REVISI 2017 TAHUN AJARAN 2019/2020

    Oleh -
    Gambar
    Salam bintang…. Saya akan kongsikan bahan dan soalan matematik wajib dan menarik kelas 10, 11, 12 untuk tahun akademik 2019/2020. Bahan ini selaras dengan Kurikulum K-13 Edisi Semakan 2017. Di bawah adalah topik matematik wajib dan menarik dari kelas 10 hingga 11 sila semak dan muat turun. Modul ini adalah hasil kerja Mas Witherwi, seorang guru di SMA Negeri 2 Bengkulu. Layari www.yudarwi.com. Terima kasih 1. Kelas X SMA adalah wajib Tajuk bab BAHAN permohonan Kesamaan linear dan ketaksamaan antara nilai mutlak pembolehubah Kesamaan nilai mutlak dan definisi ketidaksamaan Ketidakpadanan nilai mutlak Fungsi nilai mutlak Definisi persamaan linear Amalan Kesamaan Nilai Mutlak Latihan Ketaksamaan Nilai Mutlak Soalan tentang fungsi nilai mutlak Berlatih dalam persamaan linear Sistem persamaan linear dalam tiga pembolehubah Sistem persamaan linear dalam dua pembolehubah Sistem persamaan linear dalam tiga pembolehubah Aplikasi sistem persamaan linear
    Baca selengkapnya