It is probably easy to implement, but hard to name it. I am struggling to display this layout:
<ul class='menu'>
<li>
<a>item1</a>
<ul class='submenu'> ... </ul>
<li>
<li><a>item2</a></li>
</ul>
in 2 horizontal lines: first line is ul.menu and second line is ul.submenu
Css:
ul.menu
{
position: relative;
height: 20px;
}
ul.menu li {
display: inline;
}
ul.submenu {
top: 20px;
left: 0px;
position: absolute;
}
Is there a way to do it without position:absolute, so that menu container is in the flow of the document (there is no gap is submenu isn't present)?
I've set up a jsFiddle for this.
If I understand the problem correctly, you want a two-line menu, the submenu of which is still in the document flow, so the page will adjust when there is no submenu.
The catch is this: Without position: absolute, the parent <li> elements will expand to contain the submenu <ul> elements. This will leave your top-level menu items will odd spacing, depending on the width of your submenu elements.
If this isn't a problem, then the above jsFiddle should solve the issue. If it is a problem, then there is a little more work to do (and I don't have a solution quite yet).
Check my answer here, I think it's similar to what you want.
EDIT: sorry, missed the css only idea, here's what I would do:
.submenu{ display:none;}
li:hover .submenu{ display: block;}
Use the following updated CSS. It will work perfectly.
ul.menu {
height: 20px;
}
ul.menu li {
display: inline;
float:left;
}
ul.submenu {
display:block;
margin:0px;
padding:0px;
}
Related
Is it possible to create a horisontally styled menu (like on image below) without using absolute positioning or JS?
Trying to create a menu. It uses standard unordered list to display.
Here is what I'm trying to achieve:
(Green list is a submenu of "How are you". It has a line break because it is limited by width.)
And currently what I have is this:
This is the pen: http://codepen.io/olegovk/pen/NNREMY
And the code:
HTML
<nav>
<ul>
<li>Hello</li>
<li>How are you
<ul>
<li>Allright!</li>
<li>And you?</li>
<li>Fine</li>
<li>La-la-la</li>
<li>Bla-bla-bla</li>
<li>Cheerio!</li>
</ul>
</li>
<li>Good bye</li>
</ul>
</nav>
<div class="clear"></div>
<p>Some paragraph to make sure it's below the menu.</p>
CSS
.clear {
clear: both;
}
p {
background-color: lightgrey;
}
li {
float: left;
list-style: none;
display: list-item;
margin: 0 0.5em;
}
li li {
margin: 0 1em;
}
li li a {
color: green;
}
nav ul ul{
max-width: 300px;
}
I know it's possible with absolutely positioning child lists or with JS. But absolute positioning of child lists takes them out of doc flow. As a result they overlap with content below them. Also I can't use JS.
for li li use this css style .
li li {
margin: 0 1em;
position:relative;
left:-110px;
}
and give a id to good bye li and then write it css
e.g
<li><a href="#" id='someId'>Good bye</a></li>
li #someId{
position:relative;
left:-150px;
}
Seems that it's impossible.
Here is another similar question: Position: absolute and parent height?
With regards to the menu, to achieve the desired result, the only solution is to have top level menu and sub-menu in different lists. That way no need to position sub-menu (second level list) absolutely.
I've tried googling and searching here, but can't understand what's happening.
I want menu list items to be % based, I could give them % width, but then they all would be same width. I want it look nicer and have borders within distance relative to text width if that makes sense. So I decided to use table cells and % padding. It all looked nice until I started clicking links. Then width of each list item starts changing. No idea why it's happening and how to solve this. hope you can help.
* {
margin:0;padding:0;
}
#nav {
display: table;
text-align: center;
width: 100%;
background-color: #FF9;
}
#nav ul {
display: table-row;
}
#nav ul li{
display:table-cell;
margin:0;
padding:1em 3%;
border-color:#000;
border-style:solid;
border-width:0 1px 0 0;
}
#nav ul li:last-child{
border: none;
}
<div id="nav">
<ul>
<li>Home</li><li>About</li><li>Products</li><li>FAQ</li><li>Support</li><li>Contact</li>
</ul>
</div>
ok turns out simply removing padding stops that glitch from happening. And as previous commentator suggested using em works great. Not sure why I decided to use %. But nevertheless, it's odd that glitch happens after a click.
Did a lot of research on all the separate components. However, I don't understand how the components work together. Several placement issues have plagued me on different occasions. I would like to understand why it behaves like it does.
Designing a site with a fixed header, containing some buttons. I want the buttons to be placed on a colored row (NAV). That's why I made a child of NAV. However I can't seem to place the buttons over the bar.
Html
<body>
<nav class="row">
<ul class="menu">
<li id="link1">Link 1</li>
<li id="link2">Link 2</li>
<li id="link3">Link 3</li>
<li id="link4">Link 4</li>
<li id="link5">Link 5</li>
</ul>
</nav>
<div class="row main">
#RenderBody()
</div>
CSS
nav, div, li {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
border: 1px dashed black;
}
.row {
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
nav {
position: fixed;
top: 80px;
height: 40px;
z-index: 100;
background-color: Green;
border-bottom: solid greenyellow 2px;
}
.menu li {
display: block;
background-color: darkgreen;
float: left;
height: 40px;
width: 60px;
}
.menu a {
color: white;
}
Result
It can be fixed by several things, like button margin or placing the buttons relative with a negative Top offset. However, these solutions feel 'dirty', like it's not the right way to do it. Why are the LI's not on top of NAV?
because your broswer applies by default some margin to the ul tag
try adding
ul {
margin: 0;
}
you could avoid these issues by using a css reset (Eric Meyer is the authority here: http://meyerweb.com/eric/tools/css/reset/) or Necolas' Normalize.css: http://necolas.github.io/normalize.css/
the first one zeroes all the values of all elements - you have to rebuild the style of some elements like lists.
The second one normalizes the values of elements to fix browsers inconsistencies
When you use the "float" property on some elements (here the "LI"), the parent (here the "menu") ignore his floating children to calculate his height.
So you have to specify a valid height to your menu, or probably better, use "overflow:auto" on it to remember him his children.
So remove your
nav {
height:40px;
}
and add in your CSS :
.menu {
overflow:auto;
}
As in this fiddle : http://jsfiddle.net/bE3QH/
When using the element ul it sometimes creates whitespace on browsers. By making the margin 0px you are removing the whitespace decreasing the area used by element. hope this helps. The following code can be used...
ul {
margin:0px
}
You can use this instead of your code.
You will get ready made menu control on this website.
You can modify as you want & you will get your menu control available in a moment.
Here's the link.
http://cssmenumaker.com
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/
http://cssmenumaker.com/builder/1666948
Please check it out.
These are very useful and it will definitely save your time as well.
I hope this will resolve your issue.
Add this to your CSS:
ul{
margin:0;
padding:0;
}
This clears the default properties for ul elements
You would be better off if you didn't specify a width and a height for the list items, but rather displaying the anchor tags as blocks, and giving those a width and height.
I've a header div and a menu ul below it. I'd like to accomplish 2 things:
1) the ul should have the same width as the div (outer vertical borders exactly same x position
2) I'd like to keep the spacing between li elements roughly equal
With some trial and error on the li's margins and padding I roughly achieved the first point in Google Chrome (please see this jsfiddle) but in Firefox the li's don't fit in the ul so they don't stay on a single line. Also, the last li tends to 'spill over' to a second line when zooming in/out.
I tried it with margin:5px auto and padding:5px auto on the li elements but here auto seems to mean zero.
Is this really difficult/impossible or am I overlooking something obvious?
I also tried width:fit-contents but that didn't help either.
I edited a whole lot in your CSS, check the updated fiddle.
Basicly, this is what I've done:
HTML:
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
CSS:
ul {
width: 960px;
display: table;
table-layout: fixed;
}
ul li {
display: table-cell;
}
ul li a {
display: block;
}
The ul is displayed as a table, with the li's as table-cells, making it as width as the header. Within the li i display the anchors as a block, making them fill the whole li. Hope it suits you.
P.s. make sure you remove the class cf from the ul when you use this.
I think some fellow frustrates may find this useful:
.main-menu ul li ul li{
white-space: nowrap;
}
Like this
ul#mmenu li
{
padding:7px;
}
DEMO
You'll need to adjust the padding in ul#mmenu I changed the padding to padding:7px 23px; and it stays in a single line,but there will be a blank space at the right end of the last menu.
You can give absolute position to li items and position them (first have left:0, second: left:100px or so... last have right:0 and so on). That way they will always be at the same place when you zoom.
For those wanting to avoid CSS table and table-cell, which by the way, I have no probelm with you can use text-align:justify on the UL with a couple of tweaks.
Basic HTML:
<ul id='mmenu'>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
<li><a href='#'>Blah Blah Blah Blah</a></li>
<li><a href='#'>Blah Blah</a></li>
</ul>
Note we've lost the clearfix because: a) We're not going to use floats and b)it breaks this solution.
CSS:
ul#mmenu{
width:100%;
margin:15px 0 10px 0;
overflow:hidden;
text-align:justify; /*Added this*/
}
ul#mmenu li{
letter-spacing:.05em;
color:#0a93cd;
/*Now inline blocks instead of blocks floated left*/
display:inline-block;
font:24px arial;
padding:7px 26px;
background:#fff;
border-left:2px solid #0a93cd;
border:2px solid #0a93cd;
border-radius:13px;
text-align:center;
}
/*Now for the hacky part....
...justify does not, by design, justify the last row of text
therfore we need to add an additional, invisible line*/
ul#mmenu:after {
content: "";
width: 100%;
display: inline-block;
}
I have also removed the :first-child style in the Updated Fiddle
I have a problem with aligment of two li elements inside a div because in the next example
HTML
<div id="menu-container">
<div class="menu-left">
<ul id="menu-principal" class="menu">
<li>Hola</li>
<li>Hola2</li>
</ul>
</div>
<!-- More code -->
</div>
The CSS code is in the next link and I use that html structure because that is what is generated by placing a menu in wordpress.
http://jsfiddle.net/Soldier/KhLhR/1/
I have a simple code with two li elements and I want to align horizontally with 50% of width for each but doesn't work.
Edit
Well.. All responses involve float: left, but did not want to use float: left because this causes overflow to ul and I have to use overflow: hidden .. I thought there was another factor that was failing but they all give +1 and accept the answer that answered first.
Thanks
Add:
float: Left;
to the css class of the li elements of the menu (in this rule):
".menu-left ul li {"
After the "width: 50%"
The float property specifies whether or not a box (an element) should float.
See http://www.w3schools.com/cssref/pr_class_float.asp
This is purely to do with the fact that your width specification is more than you've allowed for the child element in relation to it's parent elements:
.menu-left ul li {
display:inline-block;
vertical-align: top;
width: 50%; // should be less than 50%
}
Updated fiddle: http://jsfiddle.net/KhLhR/3/
http://jsfiddle.net/Soldier/KhLhR/1/
.menu-left ul li {
display:inline-block;
float:left;
vertical-align: top;
width: 50%;
}
Add a left float to your li elements:
.menu-left ul li {
display:inline-block;
vertical-align: top;
width: 50%;
float: left;
}