I have seen many sites that give you the 'code' (HTML and CSS) for drop down menu. Many of you guys don't understand it. Sometime it doesn't work with your site. So you guys then face a lot of problems. That's why today I am gonna teach you how to make a beautiful drop down menu by yourself.
How to make a drop down menu
Before starting you have to understand the difference between CSS and HTM. CSS means 'Cascading Style Sheet'. Now you may think that the name suggest that it is some sought of a style. If so, you are right. The CSS tell us about the way our menu will look. The CSS is jut like a skin. While HTML means Hyper Text Markup Language. The HTML acts like the skeleton.
In today's lesson our goal is to make a Simple menu which looks like this.
Now lets understand the HTML first with an example
HTML
The full HTML code looks like the one shown below. Don't worry I will explain it line by line.<!-- 1 --> <ul id="mydropdownmenu">
<!-- 2 --> <li>
<!-- 3 --> Menu Item 1
<!-- 4 --> <ul>
<!-- 5 --> <li><a href="Enter your page URL here">Sub Menu Item 1</a></li>
<!-- 6 --> <li><a href="Enter your page URL here">Sub Menu Item 2</a></li>
<!-- 7 --> </ul>
<!-- 8 --> </li>
<!-- 9 --> <li>
<!-- 10 --> Menu Item 2
<!-- 11 --> <ul>
<!-- 12 --> <li><a href="Enter your page URL here">Sub Menu Item 1</a></li>
<!-- 13 --> <li><a href="Enter your page URL here">Sub Menu Item 2</a></li>
<!-- 14 --> </ul>
<!-- 15 --> </li>
<!-- 16 --> </ul>
Now lets see the explanation line by line.
Line 1) In line 1, the ul means unordered list. while id="mydropdownmenu"> is the name of the CSS menu, which we will be designing.
Line 2) <li> means list, here we use it to list the main menu items. not that when you open the list you must have to close it like this </li> as seen in line 8. The elements in between the 'list', i.e <li>......someting......</li> will be the items in the menu.
Line 3) here you write the name of your first menu item.
again unordered list opens.
Line 4) Here we will open a <li> so that we may add a sub menu item. here in between these colons add the url of the page and instead of Sub Menu Item add the name of the item. at the end close the list with </li>
Line 5) Similarly add another sub menu Item. Note that you can include as many items as you can. there is no limit.
Line 6) The list for sub menu items in menu 1 is closed with </ul>
Line 7) Close the list for menu item.
Similarly add menu item 2. You can add as many as you can. Just follow the steps.
Now modify the above code and add it to your site/blog. It will look like the one below.
Adding CSS
So now lets make it beautiful and add some styles. Lets add CSS.
/* 1 */ .tabs-inner .widget ul#mydropdownmenu
/* 2 */ {
/* 3 */ color: #ffffff;
/* 4 */ text-align: left;
/* 5 */ display: inline;
/* 6 */ margin: 0;
/* 7 */ padding: 18px 16px 14px 0;
/* 8 */ list-style: none;
/* 9 */ border:none;
/* 10 */ }
After adding the above code you will see the effect like this.
Lets understand the code line by line.
Line 1) This line will linkup your CSS with your HTML. For blogger users it will work perfect. #mydropdownmenu is the name of the menu which you used in HTML line 1.
Line 2) bracket opens.
Line 3) this line will set the color of the text. to select the choice of your try different values here #ffffff. If you dont know about these hex colour visit here at HEX COLOUR CODE. Here #ffffff means white color.
Line 4) This line tells you about the text alignment. you can try right or center instead of left..
Line 5) display: inline; This means that all of the items are in same line. You can also try block instead of inline.
Line 6) margin: 0; is used to set a space between items. You can change vales fro 0 to any number,
Line 7) padding: 18px 16px 14px 0; It helps to add space below, above and in front of the menu. Change the vales to see the effect.
Line 8) list-style: none;It is used to add bullets. 'none' means no bullet. try 'circle' or 'square'.
Line 9) border:none; It is used to add border to the menu.example can be seen in the figure. try solid instead of none.
Looking sloppy? lets add some more styles. These styles will be added to main menu items.
/* 1 */ .tabs-inner .widget ul#mydropdownmenu li {
/* 2 */ font-size: 18px;
/* 3 */ font-family: sans-serif;
/* 4 */ display: inline-block;
/* 5 */ margin-right: 3.7px;
/* 6 */ position: relative;
/* 7 */ padding: 15px 22.8px;
/* 8 */ background: #ffff00;
/* 9 */ cursor: pointer;
/* 10 */ -webkit-transition: all 0.2s;
/* 10 */ -moz-transition: all 0.2s;
/* 10 */ -ms-transition: all 0.2s;
/* 10 */ -o-transition: all 0.2s;
/* 10 */ transition: all 0.2s; }
/* 11 */ .tabs-inner .widget ul#mydropdownmenu li:hover {
/* 12 */ background: #ff0000;
/* 13 */ color: #ffffff;
/* 14 */ .tabs-inner .widget ul#mydropdownmenu li:hover a {
/* 15 */ background: transparent;
/* 16 */ color: #fff; }
The full CSS code become,
/* 8 */ background: #ffff00;
/* 9 */ cursor: pointer;
/* 10 */ -webkit-transition: all 0.2s;
/* 10 */ -moz-transition: all 0.2s;
/* 10 */ -ms-transition: all 0.2s;
/* 10 */ -o-transition: all 0.2s;
/* 10 */ transition: all 0.2s; }
/* 11 */ .tabs-inner .widget ul#mydropdownmenu li:hover {
/* 12 */ background: #ff0000;
/* 13 */ color: #ffffff;
/* 14 */ .tabs-inner .widget ul#mydropdownmenu li:hover a {
/* 15 */ background: transparent;
/* 16 */ color: #fff; }
After adding the above code you will see the effect like this.
Lets understand it,
Line 1) Same as explained before, it will set style for <li> items.
Line 2) This line will set the font size
Line 3) This line will set the font style.
Line 4) With this you can set display as explained before.
Line 5) It will set the margin to the right
Line 6) This line will set the position
Line 7) Through padding: 15px 22.8px; you can set side wise padding. change values and see the effect.
Line 8) background: #ffff00; will set the background color which in this case is yellow.
Line 9) cursor: pointer; will set the cursor style. you can try 'busy' or 'Text' or 'url' instead of 'pointer' and watch the exciting results.
Line 10) This line is very interesting. It helps to produce a transition delay. Simply it is some sought of animation. To understand it change the value from 0.2s to 2s.
Line 11) This line helps to set the style when you move cursor over the main menu items.
Line 12) This line sets the roll over background color of menu.
Line 13) This line sets the roll over text color of menu.
Line 14) Similarly this line will set the main menu item if it is the link.
Line 15) This line sets the roll over background color of menu link.
Line 16) This line sets the roll over text color of menu link.
Now Lets add styles to sub items. The code below is almost same as for main menu items. except notice a ul in the first line, which shows that it is for the sub menu items.
.tabs-inner .widget ul#mydropdownmenu li ul {
z-index:1000;
border:none;
padding: 0;
position: absolute;
top: 35px;
left: 30px;
float:none;
width: 200px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.tabs-inner .widget ul#mydropdownmenu li ul li {
background: #555; /* background colour of the sub menu items */
display: block;
color: #fff; /* font colour of the sub menu items */
}
ul#mydropdownmenu li ul li a{
color:#fff /* link colour of the sub menu items */
}
.tabs-inner .widget ul#mydropdownmenu li ul li:hover {
background: #ff1a1a; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#mydropdownmenu li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
z-index:1000;
border:none;
padding: 0;
position: absolute;
top: 35px;
left: 30px;
float:none;
width: 200px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.tabs-inner .widget ul#mydropdownmenu li ul li {
background: #555; /* background colour of the sub menu items */
display: block;
color: #fff; /* font colour of the sub menu items */
}
ul#mydropdownmenu li ul li a{
color:#fff /* link colour of the sub menu items */
}
.tabs-inner .widget ul#mydropdownmenu li ul li:hover {
background: #ff1a1a; /* background colour when you roll over sub menu items */
}
.tabs-inner .widget ul#mydropdownmenu li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
The full CSS code become,
_______________________________________________________________
_______________________________________________________________
Different styles generated
If you need more help, Kindly watch the video below.
No comments:
Post a Comment
I FEEL AWESOME WHEN YOU COMMENT.