Good day! There is a task to make a menu on css. Yesterday I spent the whole day and could not make an idea. Here is the appearance of the menu

alt text

Strongly do not kick in the layout while the novice.

  • one
    @alexfedosienko, Please clarify what you have done yourself and what did not work out. - Nicolas Chabanovsky ♦
  • I think that first we need to do two things: 1) Decide how the width of the menu component is distributed. All at 20% or, say, 100px. 2) To sketch at least some version of the general markup and write. Use the service: jsfiddle.net - Cypher
  • jsfiddle.net/NMJUs/12 So far, only this has been done - alexfedosienko

3 answers 3

There are two ways to line up two elements one after another:

display: inline; But actually display is better : inline-block; you will get the necessary "stringiness" of the element, but there will also remain some blocking features: the ability to set the width, padding, etc.

float: left; Normal wrap. I like this way more. Any streamlined element is block. No spaces appear between block elements. At least for this, I find it more appropriate. But the flow has more features. For example, the flow should be dropped. This is done by the property clear: both; (right and left and right flow). Tag with this property should go after the last streamlined element. In order not to clutter HTML with unnecessary tags, it is recommended to add the clearfix class to the code (see the code) and simply add it to the parent wrapper. With the help of the pseudo-classes before and after, the necessary elements are added with a wrap reset.

http://jsfiddle.net/NMJUs/13/

The first and last elements do not need to unify in html. You can use CSS pseudo-classes:

.menu li:first-child { } .menu li:last-child { }

Try rounding the corners using the border-radius property.

For li elements themselves add a width of 20%.

Make links inside elements block (display: block) so that they occupy the entire width of the element.

UPD1:

1) There is a very convenient service for inserting random pictures: lorempixel.com . We take from it a link like: http://lorempixel.com/20/20/people - and this is a direct link of size 20x20 to a picture from the category of people. Insert social icons instead. networks.

2) I recommend for the navigation menu to use ul / li. And for the action menu use menu / li. Navigation menu is usually set class .nav or .navigation .

3) When you scatter several components, such as li, with the contents of img, then all that concerns the markup, for example, margins or sizes, apply to li.

4) The background disappeared because they did not reset swelling. Add a clearfix class menu item to the wrapping tag.

5) If you are scattering the menus yourself with the help of wrapping around them, then add them to this clearfix.

6) And more logic in the code. Write selectors one after another, according to the semantic order.

Change the font, the gradient can be made here and, as already written, border-radius.

edit : there is still a shadow, you can make

  • For gradient, I recommend colorzilla.com/gradient-editor . There is notation used in Photoshop. - Cypher
  • Yes, and the "stack" of fonts can be obtained, say, here: cssfontstack.com - Cypher
  • yes, thanks for the gradient, there must be a choice - pavelbel

http://jsfiddle.net/NMJUs/39/