If you haven't subscribed to my channel yet subscribe right now just click on the subscribe
button and hit the bell icon to get notifications of my upcoming videos.
Hey guys what's up today we will see how to make this drop down menu with the help of
HTML and CSS only no JavaScript is required because we will be doing some manipulations
in the CSS code to achieve this task so let's begin with the code
[Music]
so beginning with HTML file give it a title whichever you like I'm just giving drop down
menu and then giving a link to a stylesheet which will be the CSS style.css now for the
menus we will be creating an unordered list so I am using the <ul> tags and to display
the contents on the screen will be using the <li> and between the anchor tags will place
our content so that the person who will be clicking on the button may jump to the another
page or maybe jump to a particular section on the same page so this will be achieved
by the anchor tag so I am just giving some menus so now just copy pasting the same thing
and I'll change the content in between now to achieve the submenus what you will
do is we will place an unordered list between the li opening and closing tags of the main
menu that is for suppose now here I'll be placing an unordered list between the opening
and closing of li tags of the About and here I will write the submenu whichever I want
below this using the same and li tags and the anchor tag to give the link
so doing again the same thing copy pasting the same line changing the content of it now
doing the same thing for all the submenus so I'll speed up the process here
so this finishes HTML part now without CSS it won't be looking even close to a drop down
menu let's see now one more thing we can add is that the arrow I had that shows that it
has a drop down menu how to get that just go on Google type font awesome cdn responsible
provided by font awesome so this go on the bootstrap cdn click the arrow here and copy
the HTML link and then paste it between your head tags remove the integrity part we don't
need that now to use this arrow on your page what you have to do is have to create a I
tag and in that I tagg you have to give a class which will be (fa fa-caret-down) so
what this will do is that it will give you that arrow on the HTML page see now you can
see that so now I just copied and pasted to the adjacent of all the menus we have so now
after we have a HTML form ready let's begin with a CSS now so beginning with the body
tag first we will set an image on the a background and make sure that it doesn't repeat that
is only one is present on whole screen giving in the background size to cover font-family
to sans-serif and changing the text colour to White now for the first ul which will have
we will set the margin to 0 padding to 0 and list style to none so if you remember the
previously the list-style was to circle we used to see the circles on the line so we
don't want that so we'll set the list style to none so now setting up the ul li which
are the menu which we will be having so for that I am setting the margin to 2 pixels float
to left height to 40 pixels and width to 250 pixels these values totally depend upon you
however you want to change them you can customise them Setting the background colour to hex
value giving it a line height font size and text align to centre and also a little opacity
looks good so setting the opacity to 0.8 after refresh you will see something like this so
as you saw there was an underline below all the menus and submenus as well so that doesn't
look good so for that will use ul li a the a part and we will send the text decoration
to none so that all the underline and all things will be gone we will set the colour
of all the menus to white and display to block this looks pretty decent now so now on the
hover effect we will change the background colour to black and we will keep a transition
of .7 second so it looks good now we don't want a submenu to be shown unless the mouse
pointer enters the menu so to do that what we will do it first will write ul li ul li
now what this is we will be accessing A sub menus by this ul li which are the menu and
below that again ul li which are the submenus
so now we will set margin to 0 and display to none so now it won't display any of the
submenu now what do we want that on the hover of the
mouse on that menu we want to show only that submenu so to do that we will do ul li:hover
ul li and here we will set the display to block so now as you can see we get a sub menu
only if the mouse enters to that particular menu so this is what we want right so we have
achieved this by using some manipulation in the CSS only now they was quite a little space
between the font of the drop down and the text we had so it doesn't look much good so
what will do if we will try to insert some space between the text in the font and how
we are going to acheive is we will write ampersand nbsp semi-colon adjacent to our menus now
what is this nbsp it's basically non breaking space it will provide space between the menu
and the font which we had let's check it out.
Ya so now this looks awesome so we will just copy and paste on all the menus
and there it is you have your form ready in just 10 minutes well I hope you enjoyed the
video if you have any doubt go ahead and ask you in the comment section if you liked the
video give it a thumbs up it encourages us a lot so thank you for watching and stay tuned
for more amazing videos bye bye
For more infomation >> 12/5/17 12:46 AM (39 S River St, Plains, PA 18705, USA) - Duration: 1:00. 
For more infomation >> Audi Q7 3.0 TDI E-TRON QUATTRO SPORT|2016|15% bijtelling| EXCL.BTW|S-Line|Trekhaak|Luchtvering|Head- - Duration: 0:54. 
For more infomation >> Meet the female candidates ...
For more infomation >> Mercedes-Benz E-Klasse E 200 d Limousine Automaat Business Solution - Duration: 1:01. 
For more infomation >> Toyota Verso 2.2 D-4D Luna (1STE EIG./Climate/Cruise/Trekhaak/17''LMV) - Duration: 0:53. 
For more infomation >> Mercedes-Benz C-Klasse C 220 d Limousine Automaat Avantgarde - Duration: 1:00. 
For more infomation >> Peugeot 208 1.6 VTi 120PK AUT 3D Allure & Navigatie - Duration: 0:59. 
No comments:
Post a Comment