Drop Down Menu

Hello friends, today in this blog you will learn how to make drop down menu bar through html or CSS. Drop-down Menu Bar is usually a drop down menu of the website and a list of items on the website above which the menu list is opened when the mouse is moved and you can go to your item by clicking on the list name of that list. can be created using html and CSS.

You may have seen different types of drop-down menu bar. Now that the time has come that you will learn how to create a search bar using the html or CSS along with the drop-down menu bar. This drop-down menu bar is designed by pure CSS animation, on which moving the mouse, there is a magic animation, which will be very useful for such drop-down menu-bar. Which you will be taught to make easily using html or CSS.

Search-box : As with any website or browsers, the search bar is the space within a website and web browser that allows you to search the internet to find the web text you want to search. Such as a search bar is found on google chrome that allows you to search on google through internet. The search bar allows users to search any file or software program.

As you can see in this image there is a search bar with drop-down menu which is designed by CSS animation. You would be surprised to know that the drop-down menu designed by CSS animation is so beautiful and attracting you only html and are getting to learn in CSS.

If you are tempted to understand this drop-down menu what I am saying, then you can solve your problem by watching the video of the drop-down menu below this problem. I mean to say that you can do it easily Will be able to understand.

Video Tutorial Of Drop Down Menu/Navigation Bar

I am very sure that by watching this video you must have understood how it has been created using html and CSS and you will also know how to create magic drop-down menu bar and search bar by CSS animation.

Drop Down Menu In Html And CSS Source Codes

Let us know about the code for html of drop down menu. We have taken the div inside the body and named the class container of this div, took a nav tag inside this container and ul tag tag inside this nav whose class name mcd -menu is placed inside this ul tag, eight li tags are taken inside which a tag is taken and this a tag is also called anchor tag. inside this tag three more tags are taken, which include the strong and small tags. Used i tag has been used for icons within which class name is given to link the icon inside each a tag i class tag name is given separately.

The class name of the i tag is given fa fa-home inside the first li tag which shows the home icon on the screen and the strong tag is taken below the i tag which means the name of the icon is written inside it.

Similarly, in the second li, the class name of the i tag is given fa-edit and the strong tag is written under this tag, inside which the name of the class name link is written.

And under the fifth li, another ul tag is taken under a tag, inside which four li tags are written, all the li tags are taken inside a tag and the i tag of a tag is used which is used in the font- What goes for the icon here the sub has been used for the drop down and again the ul tag is taken inside the second li and the li tag is also used inside it.

Inside the class mcd-menu two a tag is taken inside the most last li, in which the first a tag has the class name search and the second a tag has the class name search-mobile, the first a tag has two tags inside it. Input and another button is the type text of input tag and the placeholder is named Search ... followed by the i tag is taken inside the button tag, the icon of the search is linked and also inside the second a tag of the li tag. The tag is derived whose class name is fa fa-search

Know about the css style of drop down menu, the body is hidden with background-color and overflow-x, after this, the class container is given width and margin padding position, similarly all other li and a tags also have width and height. Styled by giving

This drop down menu has not been styled in the @media screen, which you can not see this navigation well in tab and mobile, to see it in mobile and tab, by giving @media screen the size of the device according to the tag you You can style it and fit it to see in every device. If you know JavaScript or Python well then you can use this navigation in your website.

If you want to get the source code of this drop-down menu, then the following two files are given, one is of html file and the other is of CSS source code which you can easily copy and paste into your file by scroll down to the bottom. Is



Post a Comment

Previous Post Next Post