Therefore, on this occasion I will write a tutorial on how to make menu in blogger start from the horizontal menu standard menu tab of bloggers till to how to create a responsive drop down menu 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 menu 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
Before I discuss about how to make responsive drop down menu using HTML and CSS only, I'll write how to make responsive menu using standar horizontal menu at blogger.
The Steps How to Make Menu at Blogger without Edit Template
These are the easiest ways to make a menu in the blogger, and as for the steps that should be done are as follow:- Sign into Blogger Dashboard
- Open Layout page
- Click Add a Gadget on the desired position (eg below or above header gadget).
- Select the Gadget page
- Add menus that you want
- If you are finished, please click Save button.
How to add a menu 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 menu 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 menu name that you want
- Web address (URL): please fill in by required page link
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 menu horizontal in blogger, then the next step we have to do is make the menu becomes responsive, for it please follow the steps below:
- Open the Template page, then click the gird button .
- Select: Yes, Show mobile template on mobile devices.
- 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.
- Finally please click Save
- 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 menu by clicking one by one menu on the Advanced tab, some template use Tab name for Menu name (Text Tab, Background Tab) there is also with Menu name.
- If the menu area is found then please color the menu according to taste.
- When finished coloring the menu do not forget to click Apply to Blog button.
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 menu of blogger, and if you have not satisfied yet with the standard menu 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 menu using html and css, but not inferior to drop down menu that use scripts or jQuery, apart from that I also use this way, because the loading of this drop down menu 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 menu 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 menu 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 menu 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 menu => Inspector or simply press Ctrl + Shift + I
Click the Developer menu => 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.
Hover over to More tools menu=> Developer tools or simply press Ctrl + Shift + I, and then click the Elements tab.
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 menu 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 menu 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 menu before or after the header html code.
<div class = "wrapper header"> </div>Which if we want to create a drop down menu before (above) header, then we must put the menu html code before the code
<div class = "wrapper header">.And if we want to create a menu 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 menu 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
<div class= "drop-down-menu">
<! --- Add Menu Here --->
</div>
drop-down-menu at that menu 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 menu with code
<nav>
<label class="toggle" for="drop">Menu <span>☰</span></label>
<input id="drop" type="checkbox">
<ul class="menu">
<li><a href="#">Home</li>
</ul>
</nav>
<div class="drop-down-menu">
<nav>
<label class="toggle" for="drop">Menu <span>☰</span></label>
<input id="drop" type="checkbox">
<ul class="menu">
<li><a href="#">Home</li>
</ul>
</nav>
</div>
<li><a href="#">Home</li>, and it is one menu that will appear on our blog, where if you want to add another menu 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 menu 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 menu html code will be like this
<div class="drop-down-menu">
<nav>
<label class="toggle" for="drop">Menu <span>☰</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>
How to Add Blog Page Link On Menu
That five menus above is still empty of link, and if the menu clicked, it will not bring people who click on the menu 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 menu 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 (So that the HTML code of the menu it looks like:#) with the About page link of this blog, that ishttp://www.makeonblog.com/p/about.html
<div class="drop-down-menu">
<nav>
<label class="toggle" for="drop">Menu <span>☰</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>
#) to link the desired menu.If you friends want to classify some articles that have the same topic on the menu please read The Benefits / Importance and The Function of Labels On Post Blogger.
The menu HTML code above doesn't have drop down menu 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>☰</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>
<div class="drop-down-menu">
<nav>
<label class="toggle" for="drop">Menu <span>☰</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>☰</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>
Information :
- Code
<span>☰</span>is a code to indicate a drop down menu 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 menu name, please rename the menu according to taste
Adding CSS to HTML Drop Down Menu To Have Shapes And Responsive
Once we made html drop down menu then the next step is very important we should do that is give style to the drop down menu using CSS code.
CSS code that we write should match menu html code that we created earlier.
First we will give color to the menu area that have been made earlier as well as menu background color and the wide, which is the menu area name is drop-down-menu, and in CSS code for that area menu will be written like this
. drop-down-menu {
background:#00ACED;
width:100%;
}
#00ACED is the background color code of menu 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 menu 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 menu 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;
}
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 menu 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;
}
- To change the color that is on the menu, please replace the color code
#00ACED#000#333, with the color code you want. :hoverin the CSS code above is the menu expression when the cursor point to a menu, please change background color (#333and#111) to the color you want.top: 60px; / *** Down Menu Position In The Measure From Top *** /: It is the down menu position which means 60px from the top of menu area, you can replace the value 60px if down menu postion less appropriate.width: 170px; / ***Down Menu Width***/: It is the width of down menu, you can replace the value 170px with the down menu width you want, for example 200px, etc.
/*** 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;
}
}
]]></b:skin>
</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>