Menu using html. Beautiful large jQuery menu

Menu li( float:left; )

Our entire menu has now become horizontal.

If you don't understand what exactly happened and what it does float property I recommend googling information about this property and study it thoroughly, because
Not a single page of layout can do without it, I can tell you that for sure. Well, okay, let's continue!

Menu li a( display:block;/* Make the link a block element*/ padding:12px 20px;/* Set the padding */ text-decoration: none; /* remove underscore*/ color:#fff;/* make the link color white */ background:#444;/* make the background color dark */ font:14px Verdana, sans-serif;/* set the font size and name */ )

Here is one of the most important rules- display:block;. The fact is that by default links are inline elements, and inline elements are indented in different browsers are used in different ways, so it is advisable to make the link a block element and only then apply to it the properties associated with external or internal indents. Now I don’t want to burden you with unnecessary information over time. real examples you yourself will understand why such an emphasis is placed here.

Let's see what we got, refresh the browser page and there you go!:

As you can see, it doesn’t look bad, we can say that, in principle, our menu is ready. The only thing that still needs to be done is to set the light of the links when hovering, and it seems to me that the menu will look better with separators between the items.

Let's start with the delimiters:

Menu li( border-left:1px solid #666; ) .menu li:first-child( border-left:none; )

What have we done here? Yes, everything is very simple, we set for our points (

Let's see what we got again:

In my opinion, it's much better with delimiters.

Menu li a:hover( background:#888; )

Again using a special pseudo-class, this time hover, we set the color of the link when hovering over it, look:

I think it’s cool :) I hope you end up with the same menu as mine.

This is where I will end this lesson, I really hope that it was useful to you and now you know how to layout a simple horizontal menu using pure html and css. Of course, we created a one-level menu; it will be a little more complicated with a two-level menu (with a nested list), but this is a topic for another lesson, that’s all for me. Come again, I will be glad!!!

The tag is intended to display a list of menu items. Similar to tags and

inside the container the list is formed using tags
• .

  In HTML4 the tag has become obsolete, it is recommended to use the tag instead

  . In HTML5 the tag is included again, but in a different capacity. Now it acts as a container for the tag and menu creation.
  Syntax

  HTML	menu item menu item
  HTML5	...

  Attributes Sets the visible label for the menu. Sets the menu type. Closing tag

  Required.

  Validation

  The use of this tag is deprecated by the HTML4 specification. valid code is obtained only when using the transitional. In HTML5, the tag is used correctly.

  HTML 4.01 IE Cr Op Sa Fx

  MENU tag

  In this issue:

  • Russian kitchen. Burlatskaya soup
  • Ukrainian food. Vareniki
  • Moldavian cuisine. Paprikash
  • Caucasian kitchen. Soup kharcho
  • Baltic cuisine. Vertinyai

  The result of this example is shown in Fig. 1.

  Rice. 1. View of a list created using a tag

  HTML5 IE Cr Op Sa Fx

  MENU tag

  • New... Open... Save
  • Copy Cut Paste

  Let's create a simple horizontal navigation menu for the site. For this we will use simple techniques, which will result in the correct display of our menu in all browsers.

  So, let's begin. Let's create a list with the names of our menu. Let the item names be: “Home”, “News”, “Products”, “Services”, “Partners”, “Contacts”. We create new file called menu.html, for example, using Dreamweawer or using a regular notepad. In it, between the body tags we place our menu. This is a regular bulleted list of ul with li elements. Of course, we make each menu item a link, where instead of the URL we insert the hash #. Using Photoshop program Let's create an image 3x30 px in size, with a gradient fill as shown in the figure below. We will save the file in GIF format. Let's call it bg.gif. This picture will act as the background image of our menu.

  Here are the contents of the menu.html file:

  Simple cross-browser horizontal menu

  • home
  • News
  • Products
  • Services
  • Partners
  • Contacts

  Now let's separately create a style file called main.css. Its listing is shown in full below.

  Ul ( margin:0; /*zero padding*/ padding:0; /*zero padding*/ float:left; /*align the list to the left*/ width:auto;/*set the width of the auto based on the type and contents of the list */ background-image: url(bg.gif); /*set background image*/ background-repeat:repeat-x; /*repeat our image horizontally*/ list-style:none; /*remove list markers*/ background-color:#4778c3; /*set the background color for the image*/ font-size:13px; /*set the font size*/ font-family:Arial, Helvetica, sans-serif; /*set the font*/ ) ul li ( float:left; /*align the list elements to the left*/ ) ul a ( display:block; /*represent menu links as block elements*/ width:100px; /*set the size block*/ height:30px; /*and block height*/ text-align:center; /*centered text*/ line-height: 2.1em; /* line spacing*/ text-decoration:none; /*remove underlining from links*/ color:#fff; /*link text color - white*/ border-right:#fff solid 1px; /*border on the right side of the block (1px white line)*/ ) ul a:hover ( color:#ccc; /*link changes color on hover*/ )

  I think that there should be no questions about the contents of the main.css file; I wrote the tips in the comments in sufficient detail and clearly, so I will not repeat myself. Don't forget to connect it to our menu.html page using

  Summarize. As a result, we received a completely cross-browser horizontal menu that looks the same not only in all modern browsers, but also in such rarities as IE 5.5 and IE 6.0. All menu elements are presented as block elements and have the same dimensions of 100 px width and 30 px height. The design of a block element using the right border is used as a separator for menu items. white 1px thick. This is practically the simplest way to implement a horizontal menu. Of course, if desired, you can modify it, make it more beautiful and functional using imagination, css properties and additional graphic elements. Well, our horizontal menu looks something like this:

  Pros of this solution:
  Easy to do
  Simple code
  No tables or javascript
  Cross-browser compatibility: the menu looks the same in all browsers
  Only one drawing is used
  Minimum code on menu.html page
  Minimum code for implementing styles in main.css

  Files used in in this example, can be downloaded in the archive

  From the author: Hello everyone. For some reason, webmasters associate drop-down menus with scripts, but for a long time such navigation can be done absolutely safely on pure css. Moreover, such a menu will be no worse. Today I will show you how to create a dropdown menu in css. I will share, so to speak, the recipe.

  Lesson plan and layout of our menu

  In general, let's first decide how we will create the menu itself. In html5 in a standard way it is considered to create it in the nav container using bulleted list. Let's do just that. We will remove the markers later using css, we don’t need them on the menu at all.

  Actually, I’ll write right away to html markup with nested lists. That is, our list will be two-level - it will contain other lists. Namely, for each item there is 1 list, which will form a drop-down menu.

  There is important point, which is that you may not need to make every item drop-down, but just some. No problem, then in items without dropdowns we simply do not create nested lists.

  Actually, here it is, all the markup:

  • Paragraph 1
    • Sub-clause
    • Sub-clause
    • Sub-clause
  • Point 2
    • Sub-clause
    • Sub-clause
    • Sub-clause
  • Point 3
    • Sub-clause
    • Sub-clause
    • Sub-clause
  • Point 4
    • Sub-clause
    • Sub-clause
    • Sub-clause

  < nav id = "nav" > < ul > < li > < a href = "#" >Paragraph 1< / a > < ul class = "second" > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < / ul > < / li > < li > < a href = "#" >Point 2< / a > < ul class = "second" > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < / ul > < / li > < li > < a href = "#" >Point 3< / a > < ul class = "second" > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < / ul > < / li > < li > < a href = "#" >Point 4< / a > < ul class = "second" > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < li > < a href = "#" >Sub-clause< / a > < / li > < / ul > < / li > < / ul > < / nav >

  I understand that it is huge. This is the problem with nested lists, that you need to write a lot of code. But keep in mind the fact that we are making 4 main points and for each there will be a drop-down menu.

  Actually, I gave the entire navigation an identifier of nav, and all nested lists a style class of second to understand that they are nested.

  Great, we have the markup ready, you can look at the result:

  

  Yeah, it looks terrible. But now we will include in css work and in just a few minutes our navigation will be transformed. Let's work.

  Writing CSS styles

  The first thing I'll do is reset all the padding to default for all elements. They will only get in our way; it’s better to set the indents ourselves later, where it’s needed.

  *( margin: 0; padding: 0; )

  margin: 0; padding: 0;

  #nav( height: 70px; ) #nav ul( list-style: none; )

  #nav( height: 70px; #navul( list - style : none ;

  Now we need to actually decide what our menu will be. Horizontal or vertical? I suggest doing the horizontal one first and seeing everything in its example. To do this you need to write the following styles:

  #nav > ul > li( float: left; width: 180px; position: relative; )

  #nav > ul > li( float: left; width: 180px; position: relative;

  Note that using the > sign we refer to list items that are directly nested in ul, which are directly nested in nav. This is very important because it prevents the styling from being applied to nested list items. The fact is that, according to my idea, the items in the main list will be located horizontally, and in the nested ones – vertically.

  But you, of course, can do it differently, in accordance with your idea. You can make sure that all the points are on one line.

  Anyway, the above code I hope you can understand. It forces the main list items to be pushed to the left so that they all appear on the same line, even though they are block elements. I also gave them an explicit width and relative positioning.

  Why positioning? It is necessary in order to then absolutely position nested lists. If you have studied positioning in CSS, then you probably know that if you give a block relative positioning, then all the elements in it can be positioned absolutely inside this particular block, and not the entire browser window.

  In the meantime, here's what we've got so far:

  From this screenshot you can already imagine the approximate result. Of course, we still have to design the items beautifully so that the eyes do not beg for mercy when viewing the navigation.

  #nav li a( display: block; background: #90DA93; border: 1px solid #060A13; color: #060A13; padding: 8px; text-align: center; text-decoration: none; ) #nav li a:hover( background: #2F718E; )

  #navli a( display: block; background : #90DA93; border : 1px solid #060A13; color : #060A13; padding: 8px; text - align : center ; text - decoration : none ; #nav li a:hover( background : #2F718E;

  First, the links themselves need to be made block. This is necessary for the padding to work and all properties to be applied correctly. Next, I specify the colors of the background, text, frame parameters, internal padding and centered text alignment. Finally, I undo the underlining of links.

  All these parameters do not have to be specified the way I did. You can choose the colors arbitrarily, make a different frame or not use it at all, the indents can be reduced or increased.

  Please note that in in this case We did not use the > sign, so the specified rules will apply to all links, including those located in nested paragraphs. So now we have the following:

  

  Great, but you understand that sub-items should not be visible, they should open when you hover over the desired item. Without this, our menu looks like a table. Well, it's time to hide the nested items.

  #nav li .second( display: none; position: absolute; top: 100%; )

  #nav li .second( display: none; position: absolute; top: 100%;

  First, we hide completely nested lists. Secondly, we give them absolute positioning and top coordinate: 100%. This means that the dropdown menu will appear clearly below the main item it belongs to, clearly at 100% of that item's height.

  Now we see only the main menu on the web page, which is what we need.

  Let's implement the dropout

  What remains for us to do is the most important thing - to realize the fall itself. There is nothing complicated about it, look at this code:

  #nav li:hover .second( display: block; )

  #nav li:hover .second( display: block;

  This code will work flawlessly. When you hover over a main menu item, the sublist will become visible. Moreover, only the list that is nested in the item the cursor is hovering over.

  

  There is only one minor problem - the width of the nested items does not match the width of the main ones. But this can be very easily solved by adding the appropriate styles:

  #nav li li( width: 180px; )

  #navlili( width: 180px;

  That's it, problem solved:

  

  Everything works perfectly. When you hover over the main item, a drop-down menu corresponding to it appears. If you move the cursor to the side, it disappears. If you move the cursor to the nested items themselves, you can click on them and go to required section site. Thus, we have created for you a very simple and lightweight drop-down menu with absolutely no scripts.

  Converting the menu to vertical

  Okay, s horizontal navigation We have completely figured it out, but in addition to it, the vertical one is very often found on websites and it can also be a drop-down one. In fact, changing the menu from horizontal to vertical is very easy; we only have to change a couple of lines of code.

  First, you will need to remove the float:left from the main list items. It is this property that ensures that our items are displayed on one line, but why do we need this if the navigation must be vertical?

  Now all that remains is to change the rules for the #nav li .second selector, that is, for nested lists, namely, they need to be positioned a little differently. Like this:

  #nav li .second( display: none; position: absolute; left: 100%; top: 0; )

  #nav li .second( display: none; position: absolute; left: 100%; top: 0;

  That is, it is necessary to register two coordinates instead of one. Firstly, in the case of horizontal navigation, I said that, as planned, submenu items should be displayed under the main items. In case of vertical menu This is not suitable - the items should be displayed on the side.

  Therefore, we change top: 100% to left: 100%. In addition, we also need the top coordinate. We set it to 0 so that the submenu is at the same level as the item it corresponds to.

  

  That's it, now everything works as it should. You can test it. As you can see, I didn’t lie when I said that I would only have to rewrite a few lines of code.

  Horizontal menu with several levels

  Using much the same approach, you can create more menu levels if needed. For example, let's create a list for the fourth item of the main menu, which will be nested in one of the subitems.

  In this tutorial we will create a horizontal menu using CSS. Of course, you can use ready-made solutions, for example, hire programmers for CMS Made Simple. However, you are not looking for easy ways, are you? :bully:

  Step 1 - HTML markup

  First, we need to create list items with a tag for each item in our horizontal menu. To create a submenu you need to add another child list inside the parent one.

  • Link #1
  • Link #2
  • Drop-down list
    • Documentation
    • Messages
    • Registration
  • Link #3
  • Link #4
  • Link #5

  

  Step 2 - Creation CSS styles for horizontal menu

  Initially, the menu looks vertical, to fix this we will write some styles, edit the indents, borders, background color, and round the corners. We will make the width and height fixed. We will align the menu elements to the left using float: left (so that the navigation acquires a horizontal structure).
  

  Menu, .menu ul, .menu li, .menu a ( margin: 0; padding: 0; border: none; outline: none; ) .menu ( height: 40px; width: 505px; background: #4c4e5a; background: - webkit-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: -moz-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: -o-linear-gradient( top, #5c5e6a 0%,#3c3d44 100%); background: -ms-linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); background: linear-gradient(top, #5c5e6a 0%,#3c3d44 100%); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; ) .menu li ( position: relative; list-style: none; float: left; display: block ; height: 40px; )

  Let's write the following style for a while, hiding the drop-down list. This will make editing easier.
  

  

  Step 3 - Link Menu Style

  Next, we will write styles that add some basic CSS properties such as font type, colors, padding, etc. Then we'll add a shadow for the text and color transitions to create a smooth effect where the color changes not instantly, but at some interval. To create a link separator, let's add a border to the left and right, and then remove the left border from the first link and the right border from the last link. When you hover over the menu, only the color will change.
  

  Menu li a ( display: block; padding: 0 14px; margin: 6px 0; line-height: 28px; text-decoration: none; border-left: 1px solid #494942; border-right: 1px solid #4f5058; font- family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 13px; color: #f4f4f4; text-shadow: 1px 1px 1px rgba(0,0,0,.6); -webkit-transition : color .3s ease-in-out; -moz-transition: color .3s ease-in-out; -o-transition: color .3s ease-in-out; -ms-transition: color .3s ease-in- out; transition: color .3s ease-in-out; ) .menu li:first-child a ( border-left: none; ) .menu li:last-child a( border-right: none; ) .menu li: hover > a ( color: #9fde63; )

  Step 4 - Dropdown Menu

  First of all, let's remove this line of code that we added in the second step.
  

  Menu ul ( display: none; )

  Now we will edit the style for the submenu. Let's add a submenu positioning of 40px at the top and 0px to the left of the menu item and add rounded corners below. Let's set the opacity to zero and change it to 1 on hover to create a fade in/out effect. For the up/down slide effect, we must set the list height to 0px when the dropdown is hidden, and 36px when hovering over the dropdown.
  

  Menu ul ( position: absolute; top: 40px; left: 0; opacity: 0; background: #2f3035; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border- radius: 0 0 4px 4px; -webkit-transition: opacity .3s ease .1s; -moz-transition: opacity .3s ease .1s; -o-transition: opacity .3s ease .1s; -ms-transition: opacity . 3s ease .1s; transition: opacity .3s ease .1s; ) .menu li:hover > ul ( opacity: 1; ) .menu ul li ( height: 0; overflow: hidden; padding: 0; -webkit-transition: height .3s ease .1s; -moz-transition: height .3s ease .1s; -o-transition: height .3s ease .1s; -ms-transition: height .3s ease .1s; transition: height .3s ease . 1s; ) .menu li:hover > ul li ( height: 36px; overflow: visible; padding: 0; )

  Set the width of the clickable drop-down menu to 100px. After each link I added a border to separate them. We will remove the border in the last link.
  

  Menu ul li a ( width: 100px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #464649; ) .menu ul li:last-child a ( border: none; )

  To complete a horizontal CSS menu, you need to add an icon for each drop-down submenu. To do this, we will create a custom class for each of the submenus and add a background image.
  

  Menu a.d ( background: url(docs.png) no-repeat 6px center; ) .menu a.m ( background: url(bubble.png) no-repeat 6px center; ) .menu a.s ( background: url(arrow.png) no -repeat 6px center; )

  

  Conclusion

  We have successfully created a horizontal drop-down menu using CSS3 styles and without using it, although it was also possible. If you have any questions, let me know in the comments.
  

  (downloads: 395)