There is a horizontal menu on almost any website - this is an important part, as it is able to attract or scare visitors away with its appearance and convenience. Let's learn how to create an elementary horizontal menu: make it a "skeleton" in HTML, master the basic skills of creating. You can, of course, find a ready-made menu, but it is much more pleasant to learn how to develop it yourself. This is quite an exciting experience.
Learning to make a menu
We will try not to depart from the semantics, which adhere to the luminaries of typesetting. First you need to make a "skeleton" for our HTML menu, to master the basic skills in order to independently create a horizontal menu. And then we will decorate it by applying style sheets. Let our horizontal menu contain 5 items. The first item will redirect to the main page. The second item is "About Us". The third is "Our rewards." Fourth - "This is interesting." Fifth - "Contact us."
The HTML looks like this:
Who does not know: the ul tag is used for a
bulleted list, its elements begin with li. The li tags inherit styles that apply to ul.
Ul is a block list item, it will be stretched across the width of the page. Li is also blocky.
So, create index.html. We type in our code. At this point, the browser will display a vertical rather than a horizontal menu. But our goal is to create a horizontal menu for the site. For this we need CSS.
What is CSS for?
If you are just mastering the development of sites, then you need to get acquainted with the concept of cascading style sheets. In fact, these are the rules for formatting, design, which apply to different elements on the pages of a website. If you describe the properties of elements in standard HTML, you will have to repeat this repeatedly, you will get duplication of the same pieces of code. The page load time on the user's computer will increase. To avoid this, there is CSS. It is enough to describe only once a certain element, and then simply indicate where to use the properties of a particular style. You can make a description not only in the text of the page itself, but also in another file. This will allow you to apply the description of different styles on any pages of the site. It’s also convenient to modify multiple pages by tweaking the CSS file. Style sheets allow you to work with fonts at a better level than HTML, helping to avoid heavier pages of the site with graphics.
Using Style Sheets to Design Menus
CSS for the menu:- # my_1menu {list-style: none; padding: 6; width: 800px; margin: auto;}
- # my_1menu li {float: left; font: italic 18px Arial;}
- # my_1menu a {color: # 756; display: block; height: 55px; line-height: 55px; padding: 0px 15px 0px 15px; background: #dfc; text-decoration: none;}
- # my_1menu a: hover {color: #foa; background: # 788;}
Now let's parse the resulting CSS horizontal menu.
# my_1menu - this is how style is assigned for the UL element with id = my_1menu, list-style: none is a command to remove markers to the left of list elements.
width: 800px - the width of our menu is 800 pixels.
padding: 0 - this removes the padding inside.
margin: auto - alignment of the horizontal menu in the center of our page.
# my_1menu li - style assignment to li elements.
height: 55px - the height of the menu.
# my_1menu a: hover - style assignment for a-element when the mouse is over it.
We will not describe each line in detail, since each developer can set his own parameters here. These are the basics of applying styles to menus on a site. You can give it a more complete and beautiful look by applying pictures. Give element a, for example, background: url (img1.png) repeat-x. Let there be background: url (img2.png) repeat-x for a: hover.
Use your imagination, creative preferences. Then, based on knowledge of how to create the simplest menu on a site, you will be able to design pages with your own unique design.