Creating a menu using css. Horizontal menu in the center without dropdowns
Hello dear visitors of my blog! Today we will talk about the main horizontal menu of the site, namely how to align the horizontal menu in the center. Yes, at first glance, what’s complicated here - I set the necessary indentation, fitted it all. But there are some nuances. The site, first of all, is the dynamics, i.e. new content constantly appears on the site, some new blocks with information appear, etc. So some items in the main menu may appear / disappear. With all this in mind, you need to ensure that when adding or removing a menu item, the menu, we still have everything in the center. Of course, it is not always necessary to center it, it all depends on the design. But if you still intend to set the horizontal menu in the center, then using a few simple tricks in css we can achieve the desired result.
Article structure
Horizontal menu in the center without dropdowns
First, let’s take a look at an example of a horizontal menu that does not have drop-down items.
Html code
CSS code
*, * :: after, * :: before (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;) #mainmenu (background: # 444; position: relative; overflow: hidden; height: 40px; margin: 30px 0) #mainmenu ul (list-style: none; margin: 0; padding: 0; position: relative; left: 50%; float: left; font: 14px Arial, Helvetica, sans-serif; height: 40px) #mainmenu ul li (position : relative; left: -50%; float: left; margin: 0 10px; height: 40px) #mainmenu ul li a (color: #fff; display: block; text-decoration: none; padding: 0 15px; line- height: 40px;) #mainmenu ul li a: hover (background-color: # 666;)Let's take it in order, everything is simple here. We create the “mainmenu” container, where we place our menu in the form of an unordered list.
Now it comes to css styles. First, we reset all fields and indents for all browsers to zero. Next, using the “float: left” property, we shift our unordered list to the left and then shift it by 50% to the right by relative positioning. The width of the list “ul” will be equal to the sum of the lengths of all the items “li” that are inside it. Thus, if we mentally divide the browser window in half, then our menu will go to the right of the separation line. To align, we will also apply relative positioning to the “li” items and shift them to the left by 50%, specifying the “left: -50%” property. And yet, I almost forgot, our mainmenu container must specify the property "Overflow: hidden"otherwise we get a horizontal scrollbar.
That's all, now our menu is centered. Now you can add, even reduce points, this will not affect the positioning. You can also use this menu on your sites simply by changing the styles for your design.
Horizontal menu in the center with dropdowns
Now let's deal with the drop-down subparagraphs. Here the situation is somewhat different and somewhat more complicated, because in the first case, the subitems will not drop out for us, because we specified the property “overflow: hidden” to the “mainmenu” block. This means that items outside this block will not be displayed. But there is a way.
So, I changed the previous code and removed the “overflow: hidden” property from it.
Html code
CSS code
*, * :: after, * :: before (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;) #mainmenu (position: relative; background: # 444444; height: 40px; margin: 30px 0; padding: 0; float: left; width: 100%; z-index: 10) #mainmenu ul (clear: left; position: relative; right: 50%; height: 40px; float: right; text-align: center; font: 15px Arial, Helvetica , sans-serif; list-style: none; padding: 0; margin: 0) / ** Key points ** / #mainmenu\u003e ul\u003e li (position: relative; left: 50%; float: left; height: 40px ; padding: 0; margin: 0) #mainmenu\u003e ul\u003e li\u003e a (border-left: 1px solid # 666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height : 40px;) #mainmenu\u003e ul\u003e li: first-child\u003e a (border: none) #mainmenu\u003e ul\u003e li: hover\u003e a, #mainmenu\u003e ul\u003e li.hover\u003e a, #mainmenu\u003e ul\u003e li. active\u003e a (color: #fff) #mainmenu\u003e ul\u003e li: hover, #mainmen u\u003e ul\u003e li.hover, #mainmenu\u003e ul\u003e li.active (background: # 666) / * Drop-down subparagraphs * / #mainmenu ul li ul (position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px) #mainmenu\u003e ul\u003e li ul li (background-color: # 666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left;) #mainmenu ul li ul li a (border-bottom: 1px solid # 999; display: block; color: #fff; padding: 10px 15px; text-decoration: none;) #mainmenu ul li ul li.parent a (position: relative;) #mainmenu ul li ul\u003e li.parent\u003e a :: before (border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY (-50%) rotate (45deg); height: 6px; width: 6px;) #mainmenu ul li ul li: hover, #mainmenu ul li ul li.hover (background-color: # 444) #mainmenu ul li: hover ul, #mainmenu ul li.hover ul (display: block) / * Second level drop-down items * / #mainmenu ul li: hover\u003e ul (opacity: 1; visibility : visible; margin: 0;) #mainmenu ul li ul li ul (top: 0; left: 200px; margin: 0 0 0 20px; width: 180px)Now we have the menu set to the center and when you hover, the sub items drop out.
Aligning menus with flexbox
Center menu You can also by applying a new rule in css - flexbox. In general, I want to devote a separate post to tricks with flexbox, it’s worth it, it makes life easier for the layout designer. In general, we will not go deep here ... I will give here only css code for the menu with drop-down items. HTML code is the same as above.
CSS code
*, * :: after, * :: before (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box- sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;) #mainmenu (position: relative; background: # 444444; height: 40px; margin: 30px 0; padding: 0; width: 100%; z-index: 10) #mainmenu ul (display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit- box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: 40px; text-align: center; font: 15px Arial, Helvetica, sans-serif ; list-style: none; padding: 0; margin: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;) / ** Key points ** / #mainmenu\u003e ul\u003e li (position: relative; height: 40px; padding: 0; margin: 0) #mainmenu\u003e ul\u003e li\u003e a (border-left: 1px solid # 666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; ) #mainmenu\u003e ul\u003e li: first-child\u003e a (border: none) #mainmenu\u003e ul\u003e li: hover\u003e a, #mainmenu\u003e ul\u003e li.hover\u003e a, #mainmenu\u003e ul\u003e li.active\u003e a (color: #fff) #mainmenu\u003e ul\u003e li: hover, #mainmenu\u003e ul\u003e li.hover, #mainmenu\u003e ul\u003e li.active (background: # 666) / * Drop-down subparagraphs * / #mainmenu ul li ul ( position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px) #mainmenu\u003e ul\u003e li ul li (background-color : # 666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left;) #mainmenu ul li ul li a (border-bottom: 1px solid # 999; display: block; color: #fff; padding: 10px 15px; text-decoration: none;) #mainmenu ul li ul li.parent a (position: relative;) #mainmenu ul li ul\u003e li.parent\u003e a :: before (border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY (-50%) rotate (45deg); height: 6px; width: 6px; ) #mainmenu ul li ul li: hover, #mainmenu ul li ul li.hover (background-color: # 444) #mainmenu ul li: hover ul, #mainmenu ul li.hover ul (display: block) / * Drop-down items second level * / #mainmenu ul li: hover\u003e ul (opacity: 1; visibility: visible; margin: 0;) #mainmenu ul li ul li ul (top: 0; left: 200px; margin: 0 0 0 20px; width : 180px)As you can see, the rules have changed only for the parent list - #mainmenu ul. The only thing was to add prefixes for previous versions of browsers. I note that the flexbox rule is correctly understood only by modern browsers. If you focus on older browsers, then the option with flex’s have to be postponed. Which browsers understand flexbox well, you can see
Good day to all who are reading this publication. Today I want to tell you about one of the tools of site building, without which no web resource can do. This is the site menu, or as they say site map. Today, there are an unlimited number of types and subspecies of the menu.
Developers of online stores, blogs, training services and other resources are experimenting and creating more and more new and unusual maps. After reading the article, you will learn what major groups all types of navigation panels are divided into, you can try each of them, and also learn how to write menu code for the html site. Now let's get down to business!
Tools for creating a navigation bar
There are several ways to create a menu in a markup language. Their main concept is to use an unordered list. Thus, in the usual for us html 4 developers write tags on the page
- and
- .
As stipulated in previous publications, the paired element
- creates a bulleted list, and
- - one list item. For clarity, let's write the code for a simple menu:
Navigation Site navigation
- home
- News of the week
- Technological advances
- Chat
However, with the advent of the platform, the markup language was replenished with additional tags. That is why the menu of modern websites is created using a special tag< menu\u003e. In use, this element is no different from bulleted lists.
Instead of one < ul\u003e prescribed < menu\u003e. However, significant differences appear judging by the work. So, the second example speeds up the work of search engines and robots in. When analyzing the structure of the site, they immediately understand that this piece of code is responsible for the site map.
There are horizontal, vertical and drop-down menus. Sometimes the navigation bar is designed as an image. As the technology segment has expanded, web services are being made responsive, i.e. the page structure automatically adapts to the screen size of the devices. Consider the listed menu groups.
Create a horizontal navigation model
This type of navigation is most popular. When the panel is horizontally styled, all menu items are located in the page header or in the "footer" (sometimes navigation elements are duplicated, being displayed both at the top and bottom).
As an example, we will create a horizontal panel, the menu items of which will be styled using css (cascading style sheets), or rather transformed. So, each individual element will be in a beveled rectangle. Intrigued?
For transformation, we use the css property called transform. The built-in function is used to indicate the transformation. skewX, in which the angle of inclination is indicated in degrees.
Unfortunately, each browser works with this property in its own way, despite the prescribed standards. Therefore, to indicate whether special prefixes were created:
- -ms- (Internet Explorer)
- -o- (Opera)
- -webkit- (Chrome, Safari)
- -moz- (Firefox)
And now the knowledge gained is applicable to writing an example.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 Horizontal panel Horizontal panel And now vertically. I said upright!
For the second program, we use the previous code as a basis. I wanted the items in my vertical menu not to be beveled, but with rounded corners.
For this, I used another css property border-radius.
In previous articles, I already worked with this parameter, so I think that there will be no difficulties with understanding its functioning.
Vertical panel As you may have noticed, the main change in this code is the lack of an ad display: inline-block, which actually was responsible for the horizontal arrangement of navigation points.
Sub menu items: drop-down list
We have examined the main groups of navigation panels, but there are several more varieties or, better, add-ons.
Sometimes situations arise when some of the points supplement the main ones. In this case, one cannot do without drop-down lists. They are created by transformations with css tools.
Below I have attached the code of a small program in which this approach is implemented.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 Drop-down list Drop-down list In this example, I divided the menu units into two classes:
- m-menu
- s-menu
The first class is responsible for the main menu, and s-menu for the submenu.
In the code you can find such a technique as .m-menu\u003e li: hover or .m-menu\u003e li.
So, using: hover indicates how the element will behave when you hover over it.
In this case, the "\u003e" sign modifies the selector so that only objects belonging to the upper level are block-lowercase.
The submenu was initially set. display:nonethat notifies the handler to hide this object. After hovering over a navigation item indicating hover, property value display changes to block and therefore a drop-down list opens.
As you can see, the implementation of this technique is very simple.
Now you have mastered the main types of navigation panels and you can independently modify, supplement and modernize them. If you liked my article, subscribe to blog updates and share the source of knowledge with friends and colleagues. Bye Bye!
Sincerely, Roman Chueshov
Read: 1010 times
In this lesson we will create cSS horizontal menu. Of course, you can use ready-made solutions, for example, hire programmers for CMS Made Simple. However, you are not looking for easy ways? : bully:
Step 1 - HTML markup
First you need to create list items with a tag for each item in our horizontal menu. To create a submenu, you must add another child list inside the parent.
Step 2 - Creating CSS Styles for the Horizontal Menu
Initially, the menu looks upright, to fix this, we will write some styles, edit the indentation, borders, background color, rounded corners. We will make the width and height fixed. We will align the menu items 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 for a while the following style, hiding the drop-down list. This will make it easier to edit.
Step 3 - Link Menu Style
Next, we’ll write styles that add some basic CSS properties such as font type, colors, padding, etc. Then we add a shadow for the text and color transitions to create a smooth effect when the color changes not instantly, but with a certain interval. To create a link separator, add a border to the left and right, and then delete the left border in the first link and the right border in 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\u003e a (color: # 9fde63;)
Step 4 - Dropdown Menu
First of all, let's delete this line of code that we added in the second step.
Menu ul (display: none;)
Now we will edit the style for the submenu. Add the positioning of the 40px submenu at the top and 0px to the left of the menu item and add rounded corners to the bottom. Set the transparency to zero, and when you hover, change it to 1 to create an amplification / attenuation effect. For the slide effect up / down, we must set the list height to 0px when the drop-down menu is hidden, and 36px when you hover over the drop-down list.
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\u003e 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\u003e ul li (height: 36px; overflow: visible; padding: 0;)
Set the width of the clickable drop-down menu - 100px. After each link, I added a border to separate them. We’ll delete 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 finish the horizontal menu in CSS you need to add an icon for each drop-down submenu. To do this, we will create our own class for each of the submenus and add a background image.
Menu ad (background: url (docs.png) no-repeat 6px center;) .menu am (background: url (bubble.png) no-repeat 6px center;) .menu as (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)
A task
Make a horizontal menu, the items of which have an arbitrary slope (Fig. 1).
Fig. 1. Menu view with sloping items
Decision
The transform property is responsible for the transformation of the element; the skewX function is used as its value, which sets the desired slope. The angle of inclination is easier to set in degrees, for example, 30deg is 30º from the vertical. Transformation affects all child elements, so the text inside the element will also be tilted, which does not reflect in the best way on its readability and beauty. Therefore, it is important to apply the slope again to the text, but in the other direction, for this it is enough to simply change the sign in front of the degree value.
Browsers support the transform property mainly with their own prefixes, so for versatility in styles, you should repeat it several times with the same value, adding -moz- for Firefox, -webkit- for Safari and Chrome, -o- for Opera and -ms - for Internet Explorer as shown in example 1.
Example 1. Inclination of a menu item
HTML5 CSS3 IE Cr Op Sa Fx
Menu - Joker
- Pazuzu
- Palpatine
- Dr. Doom
In this example, a horizontal menu is created using a bulleted list. To make the list exactly horizontal, a display property with an inline-block value is added to the li element in styles. To tilt, use the transform property with the skewX function and a value of -30º. This property also applies to links within the list, but with a positive value of 30º, this ensures correct, rather than oblique, display of letters.
Chrome, Safari, and Firefox use the transform property for block or line-block elements, so the display property is set to links with a value of block.
From the author: Welcome to our sitebuilding blog. This is a series of articles devoted to the new specification and today I would like to tell you how to make a menu in html5 and how this process differs from the same in previous versions of the language.
What are the differences
First of all, I would like to say that the specification is not so new - it began its formation back in 2009. Actually, since then there has been a constant development - new features appear in html5, modern browsers more and more support these very features, so it will soon be possible to talk about full support for this technology, although it is not a single whole, it is rather a set of new features, each of which is independent.
Well, well, how does the creation of the main navigation (menu) differ, since you are reading an article on this topic, then there should definitely be some differences. Well, how was the menu created before? Usually, a bulleted list was used for this, which was placed in an additional container for the entire navigation - a regular div.
So, with the advent of new tags, you can now do more correctly - instead of the div tag, wrap the menu in nav - a new semantic element that was created specifically to collect the most important links into it, group them together.
In nav, you can put both a list and just a set of links. It seems to me that this is even a simpler and more correct solution, although in many templates you can still see the implementation of the menu using the tags ul, li, a.
Interestingly, the nav container was created specifically for the priority links on the page. In fact, there can be more than one such page con- tainer, but only those links that really form the main navigation (for example, the top main menu and its double in the footer of the page) should be placed in them.
How to make html5 horizontal menu
You don’t even need any framing in the list, everything will initially be displayed on one line, since links are inline elements.
Another thing is that they are very limited in design due to their lowercase properties. You can only operate with such properties as: color, font size, indentation. If you want to set a specific background color, make dividers and add indentation (or determine the size of each menu item), then you won’t be able to do this with the line.
Here we will have to convert our points into block elements. To do this, they need to write a property:
display: block;
Now they go from top to bottom, that is, our navigation has become vertical. To turn it horizontal again, you need to add certain properties. For example, instead of block type, define block-lowercase for them, or set them (float: left). Read more about these methods.
Vertical navigation
Usually a list is used to make a vertical menu in html5, but the markup I gave you above is also suitable for us. As you saw, if you convert links to block ones, they will automatically line up one after another from top to bottom, because two blocks cannot stand on the same line.
Now you can apply the necessary design rules to them. There are much more properties to blocks than to a line element, so you have much more options. For example, I added these:
a (text-decoration: none; color: #fff; padding: 5px; font-size: 22px; display: block; background: linear-gradient (to right, rgba (96,108,136,1) 0%, rgba (63,76,107 , 1) 100%); width: 200px; text-align: center)
text - decoration: none;
color: #fff;
padding: 5px;
font - size: 22px;
display: block;
background: linear - gradient (to right, rgba (96, 108, 136, 1) 0%, rgba (63, 76, 107, 1) 100%);
width: 200px;
text - align: center
- - one list item. For clarity, let's write the code for a simple menu: