Creating Responsive Drop Down Sajian At Blogger Using Html + Css And Basic Horizontal Sajian Blogger

A blog or website commonly has sajian tab, at least there is one sajian tab mounted on a blog, it sets as a horizontal sajian at his blog or a vertical menu.

Therefore, on this occasion I will write a tutorial on how to make sajian in blogger start from the horizontal sajian standard sajian tab of bloggers till to how to create a responsive drop down sajian using HTML and CSS only (without a script / jQuery).

Why do we have to create a responsive menu?

Because now a day that a website or blog is required to have responsive display, and the blog sajian should also be responsive too (mobile friendly), which means that the display will correspond to the blog when we visited on a desktop, tablet, or mobile.

So it is very important to have responsive template design, see also: .....

The Steps How To Make Responsive Menu using Standar Menu Tab Horizontal at Blogger

Responsive Drop Down Menu With HTML and CSS

Demo

Before I discuss about how to make responsive drop down sajian using HTML and CSS only, I'll write how to make responsive sajian using standar horizontal sajian at blogger.

The Steps How to Make Menu at Blogger without Edit Template

These are the easiest ways to make a sajian in the blogger, and as for the steps that should be done are as follow:

1. Sign into Blogger Dashboard
2. Open Layout page
3. Click Add a Gadget on the desired position (eg below or above header gadget).
4. Select the Gadget page
5. Add menus that you want
6. If you are finished, please click  Save button.

How to add a sajian on gadget pages

If your blog has some pages, then your blog pages list will appear ongadget pages (see picture above).

So to add these pages in the menu, please tick on the page name in the list, it will be automatically added to the sajian that exist on your blog.

Besides we can add pages that already exist on the list we can also add other pages that do not exist in the list, for example, we want to add label page, certain post, or any other link blog, the ways:

Please click on Add external link, it will open the new window

• Page title: please fill with sajian name that you want
• Web address (URL): please fill in by required page link

After all of sajian already have been made, then please arrange the position of the sajian if needed, the way: drag and drop to change ordering.

How to Make Menu Being Responsive and Give Color to The Menu

Previously, I would like to stress that this will only work on blogger default templates and templates that support this feature, so another template outside default blogger template it may not support this feature.
After successfully creating a standard sajian horizontal in blogger, then the next step we have to do is make the sajian becomes responsive, for it please follow the steps below:

1. Open the Template page, then click the gird button .
2. Select: Yes, Show mobile template on mobile devices.
3. Then select Choose mobile template. If you use a template outside of the default blogger template, you have to follow the template settings that is used (if any), usually we have to choose Custom template.
4. Finally please click Save

Furthermore, we also can design / coloring the menu, the ways are:

• Click Customize button on the blogger template page, then you will be brought to the Blogger Template Designer.
• Click Advanced Tab.
• Then find the area of your template sajian by clicking one by one sajian on the Advanced tab, some template use Tab name for Menu name (Text Tab, Background Tab) there is also with Menu name.
• If the sajian area is found then please color the sajian according to taste.
• When finished coloring the sajian do not forget to click Apply to Blog button.

Ok, now we go to the next way.

How to Make Responsive Drop Down Menu Using HTML and CSS (Without Script)

From the discussion above we already know how to create a standard horizontal sajian of blogger, and if you have not satisfied yet with the standard sajian that has been provided by blogger and want to create a drop down menu, then this could be the solution.

This is a way to create drop down sajian using html and css, but not inferior to drop down sajian that use scripts or jQuery, apart from that I also use this way, because the loading of this drop down sajian is faster so as not make overload to blog speed.

How to Find The Great Area for Menu (Define Menu Position)

Before we start to create a drop down sajian in the blogger using this way, then the first thing we should do is to determine where we would put the menu.

Generally drop down sajian placed before the header area or beyond, but the html code for the header area is not always same, because of that the way that I will write here is very important to know.

The easiest way to find the right area for a menu, then we will use the tools that are already available on a web browser such as Mozilla, Chrome or other web browsers.
Here I will write how to find the right area for your blog sajian using Mozilla and Chrome.

1 Using Mozilla

Open your blog on Mozilla browser, then click Menu which the positioning in the top right corner.
Click the Developer sajian => Inspector or simply press Ctrl + Shift + I

2 Using Chrome

Go to your blog with Chrome, then click Menu on the top right corner.
Hover over to More tools menu=> Developer tools or simply press Ctrl + Shift + I, and then click the Elements tab.

If you use Mozilla then hover over  point to the area that my you wanted on a blog, then you will find the html code for that area.

If using Chrome hover over the HTML code in the web Elements tab, then the existing area in the html code will be blocked.

By the html code to the existing area on our blog, then we can easily set up html code for a drop down menu.

Which means that if we want to add any widget or sajian before or after the area that we want then we can put additional code before the area code.

Example: we want to create a drop down sajian before or after the header, then we should find HTML code for the header, and having found then we can put html code of drop down sajian before or after the header html code.

In this example the header code is <div class = "wrapper header"> </div>

Which if we want to create a drop down sajian before (above) header, then we must put the sajian html code before the code <div class = "wrapper header">.

And if we want to create a sajian after (below) the header, then we have to put up the code after <div class = "wrapper header"> ...... </div> (the points mean the code that exist between code <div class = "wrapper header"> and </div> (which is where the code </div> is the closing code header).

Make Drop Down Menu Using HTML

Well, after determining where to put the menu, then we go to create a sajian using html code that I will write step by step.

The first step we must to do is enter to Edit HTML page of blogger template, the way: open template page on blogger dashboard, then click Edit HTML button

When you have brough to Edit HTML page of blogger template then you have to find area code that you have decided before, then you can put the dropdown sajian to upstair (before) or under (after) the area code.

The next step we have to do is to make drop down sajian area, that is:

<div class= "drop-down-menu"> <! --- Add Menu Here ---> </div> 

code drop-down-menu at that sajian area may be replaced with any name, for example we give it name with my-menu, so, it will be like this <div class ="my-menu">, but this should be in accordance with the css code that be written later.

Next we will create one sajian with code

 <nav> <label class="toggle" for="drop">Menu <span>&#9776;</span></label> <input id="drop" type="checkbox"> <ul class="menu"> <li><a href="#">Home</li> </ul> </nav> 

Then the code result would be like this:

 <div class="drop-down-menu"> <nav> <label class="toggle" for="drop">Menu <span>&#9776;</span></label> <input id="drop" type="checkbox"> <ul class="menu"> <li><a href="#">Home</li> </ul> </nav> </div> 

At the code above contained <li><a href="#">Home</li>, and it is one sajian that will appear on our blog, where if you want to add another sajian then you should wrap the code <li> and </li> or more details like this <li><a href="#">Other Menu</li>.

The fence mark on code <li><a href="#">Home</li> is where we put a refer link, for example, I put link the home page of this blog is http://www.makeonblog.com, then the resulting code sajian it would be like this <li><a href="http://www.makeonblog.com">Home</li>

For example, we want to make 5 menus, are: Home, About, Contact, Category, and Other. The results of the sajian html code will be like this

 <div class="drop-down-menu"> <nav> <label class="toggle" for="drop">Menu <span>&#9776;</span></label> <input id="drop" type="checkbox"> <ul class="menu"> <li><a href="#">Home</li> <li><a href="#">About</li> <li><a href="#">Contact</li> <li><a href="#">Category</li> <li><a href="#">Other</li> </ul> </nav> </div> 

For the sajian name you can adjust sajian with the sajian name that you want.

How to Add Blog Page Link On Menu

That five menus above is still empty of link, and if the sajian clicked, it will not bring people who click on the sajian to any page.

And to embed the link, then that should be done is to replace the fence code (#) with the page link that refer to.

example:

I would like if the About sajian is clicked then it will bring visitors to the About page in this blog, so what I have to do is change the code on the fence (#) with the About page link of this blog, that is http://www.makeonblog.com/p/about.html

So that the HTML code of the sajian it looks like:

 <div class="drop-down-menu"> <nav> <label class="toggle" for="drop">Menu <span>&#9776;</span></label> <input id="drop" type="checkbox"> <ul class="menu"> <li><a href="#">Home</li> <li><a href="http://www.makeonblog.com/p/about.html">About</li> <li><a href="#">Contact</li> <li><a href="#">Category</li> <li><a href="#">Other</li> </ul> </nav> </div> 

And to add another page on the menu, then the way we have to do is same, that is by replacing the fence code (#) to link the desired menu.

If you friends want to classify some articles that have the same topic on the sajian please read The Benefits / Importance and The Function of Labels On Post Blogger.

The sajian HTML code above doesn't have drop down sajian yet, and to add drop down menu, then we need to add HTML code for the drop down menu.

Suppose we want to add 3 drop down menus on Category menu, then the thing to do is remove the code <a href="#"> Category then replace with this code

         <label for="drop-1" class="toggle">Category <span>&#9776;</span></label>       <a href="#">Category</a>       <input type="checkbox" id="drop-1"/>       <ul>         <li><a href="#">Drop Down 1</a></li>         <li><a href="#">Drop Down 2</a></li>         <li><a href="#">Drop Down 3</a></li>       </ul> 

So the end result html drop down sajian to be like this

 <div class="drop-down-menu"> <nav> <label class="toggle" for="drop">Menu <span>&#9776;</span></label> <input id="drop" type="checkbox"> <ul class="menu">     <li><a href="#">Home</a></li>     <li><a href="#">About</a></li>     <li><a href="#">Contact</a></li>     <li>          <label for="drop-1" class="toggle">Category <span>&#9776;</span></label>       <a href="#">Category</a>       <input type="checkbox" id="drop-1"/>       <ul>         <li><a href="#">Drop Down 1</a></li>         <li><a href="#">Drop Down 2</a></li>         <li><a href="#">Drop Down 3</a></li>       </ul>     </li>     <li><a href="#">Other</a></li>   </ul> </nav> </div> 

For this stage we have done 5 sajian with 3 drop down menu, which the sajian still has not been given a shape because we don't give the style yet (CSS code).

Information :

• Code <span>&#9776;</span> is a code to indicate a drop down sajian with the view like this ☰, please change the code with the icon you want, for example using the icon fromt Google, or Font Awesome icon.
• Code # please replace with page link you want refer to.
• The part that I gave underline is for sajian name, please rename the sajian according to taste

Please copy the simpulan results of drop down sajian code above before or after the specified area was, if it had been forgotten please re-read How to Find The Great Area for Menu which I wrote above.

Adding CSS to HTML Drop Down Menu To Have Shapes And Responsive

Once we made html drop down sajian then the next step is very important we should do that is give style to the drop down sajian using CSS code.

CSS code that we write should match sajian html code that we created earlier.

First we will give color to the sajian area that have been made earlier as well as sajian background color and the wide, which is the sajian area name is drop-down-menu, and in CSS code for that area sajian will be written like this

 . drop-down-menu { background:#00ACED; width:100%; } 

code #00ACED is the background color code of sajian area that give color to this background, you can change code #00ACED with another color code that you wanted.

A value of 100% means that the width is 100% (same width with areas that exist in the template), and if the sajian is not currently on any area that is in the template, so you have to replace it in accordance with the width of the template used.

For example we want to create a sajian that has a #ff0000 background with 1000px width, then we can write it like this

 . drop-down-menu { background:#ff0000; width:1000px; margin:0 auto; } 

Additional code margin: 0 auto This may be written as margin: 0 auto 0 auto;. This means that the distance between the upper and lower 0px, and the distance between the left and right auto (balanced between the left and right so that the area of the sajian will be visible in the middle).

Next we'll add other CSS code to the drop down menu, but if I explain one by one then this tutorial will be too long, so I'll write the whole CSS code for this drop down menu.

 .drop-down-menu {     background: #00ACED;     width:100%; } nav {     width:100%;     padding:0; } nav:after {     content: "";     display: table;     clear: both; } nav ul {     float:left;     padding: 0;     margin: 0;     list-style: none;     position: relative; } nav ul li {     margin: 0px;     display: inline-block;     float: left;     background: #00ACED; } nav ul li ul li{     background: #333; } nav a, nav a:hover, nav a:visited {     display: block;     padding: 0 20px;     color: #FFF;     font-size: 20px;     line-height: 60px;     text-decoration: none; } nav ul li ul li:hover {     background: #333; } nav a:hover {     background-color: #333; } nav ul li ul li a:hover {     background-color: #111; } nav ul ul {     display: none;     position: absolute;     top: 60px; / *** Down Menu Position In The Measure From Top *** / } nav ul li:hover > ul {     display: inherit; } nav ul ul li {     width: 170px; / ***Down Menu  Width***/     float: none;     display: list-item;     position: relative; } nav ul ul ul li {     position: relative;     top: -60px;     left: 170px; } nav label span{     float:right; } .toggle, [id^=drop] {     display: none; } nav input[type=checkbox]{     display: none; } 

Information :

• To change the color that is on the menu, please replace the color code #00ACED #000 #333, with the color code you want.
• :hover in the CSS code above is the sajian expression when the cursor point to a menu, please change background color (#333 and #111) to the color you want.
• top: 60px; / *** Down Menu Position In The Measure From Top *** /: It is the down sajian position which means 60px from the top of sajian area, you can replace the value 60px if down sajian postion less appropriate.
• width: 170px; / ***Down Menu  Width***/: It is the width of down menu, you can replace the value 170px with the down sajian width you want, for example 200px, etc.

Next we will create a drop down sajian becomes responsive (Mobile Friendly) using the following additional CSS.

 /*** Media Queries ***/ @media all and (max-width : 768px) {     nav {         margin: 0;     }     .toggle + a,     .menu {         display: none;     }     .toggle {         display: block;         background-color:#333;         padding: 0 20px;         color: #FFF;         font-size: 20px;         line-height: 60px;         text-decoration: none;         border: none;     }     .toggle:hover {         background-color: #000000;     }     [id^=drop]:checked + ul {         display: block;width: 100%;     }     nav ul li {         display: block;         width: 100%;     }nav ul ul .toggle,     nav ul ul a {         padding: 0 40px;     }nav ul ul ul a {         padding: 0 80px;     }     nav a:hover,     nav ul ul ul a {         background-color: #000000;     }     nav ul li ul li .toggle,     nav ul ul a {         background-color: #212121;     }     nav ul ul {         float: none;         position: static;         color: #ffffff;     }     nav ul ul li:hover > ul,     nav ul li:hover > ul {         display: none;     }     nav ul ul li {         display: block;         width: 100%;     }     nav ul ul ul li {         position: static;     } } 

Copy Horizontal Drop Down Menu CSS and Responsive Drop Down Menu CSS, then paste it at the top before the code ]]></b:skin>

Or it could also put responsive drop down sajian CSS on the top before </head> by adding a bit of code at before and after, that is:

<style type='text/css'> / *** Paste CSS Horizontal Drop Down Menu Here *** / / *** Paste Responsive CSS Drop Down Menu Here *** / </style> 

Please modify the code html + css drop down sajian that I wrote above as you need.