I've got a menu that pops out of a list item. Something to this effect:
<li>
<ul class="topmenu">
<li class="submenu">
<a class="otherIT" href="#" title="Common IT Tasks"><img src="./images/ittasks.png" alt="Common IT Tasks" /></a>
<a class="otherIT" href="#" title="Common IT Tasks">Other - Common IT Tasks</a>
<p>Most common IT tasks.</p>
<ul class="subsubmenu">
<li>
Log a ticket
</li>
<li>
Map drives
</li>
<li>
Unlock a user
</li>
</ul>
</li>
</ul>
</li>
Immediately underneath this li item I have this:
<li class="break">
Back to top
</li>
When I don't hover over the li item it gives me this effect:
When I hover over this li item it gives me this effect:
Great the menu works, my issue is the gap between the word "Back to top" with the li item, it is fairly large. I believe it is due to the invisible li items of the list. For anyone interested, the CSS is something to this effect:
ul.topmenu, ul.topmenu ul {
display: block;
margin: 0;
padding: 0;
}
ul.topmenu li {
display: inline;
list-style: none;
margin: 0;
padding-right: 1.5em;
}
ul.topmenu li ul {
visibility: hidden; }
ul.topmenu li.submenu:hover ul {
visibility: visible;
}
Simple classic visibility is hidden unless you hover, however, the whitespace between the word "Back to top" with the list item is too large.
visibility: hidden only makes the element invisible, but does not remove it from the page flow.
display: none will hide the element and remove it from the page flow (so it won't take up any space or affect other elements in any way).
visibility : hidden only makes the element invisible, but does not remove it from the page flow. display: none will hide the element and remove it from the page flow (so it won't take up any space or affect other elements in any way)
ul.topmenu li ul
{
display: none;
}
ul.topmenu li.submenu:hover ul
{
display: block;
}
visibility:hidden do not show element, but still reserves space for it.
Try display:none
Use the CSS display: none rule instead of visibilty: hidden, because you want your tag to not be displayed at all, you don't want a blank space allocated in it's place (see). From the W3 docs:
Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves.
Also, what does the W3 validator say about your HTML?
Related
I am trying to create a drop-down menu for when the user hovers an item in another menu.
My current HTML:
<ul>
<li class="menu-main-items">Item1</li>
<ul id="submenu">
<li>Sub-item1</li>
<li>Sub-item2</li>
</ul>
</li>
<li class="menu-main-items">Item2</li>
</ul>
CSS:
.menu-main-items{display:inline;}
#submenu{display:none;}
li:hover #submenu{ //display the submenu below the parent main item }
To align the sub-menu with the parent item, I was thinking using position:relative; on #submenu and adding a certain offset, but that causes flickering, as the sub-menu is being displayed before item 2, rearranging the menu. As of now I have searched around and could only find explanation with one item in the main menu which doesn't cause the problem.
Is there another way to approach this?
You should make the li elements inline-block and change the positioning to absolute. The flickering is because the element is being shown and pushing the content out of the way as it is inserted into the flow. position: absolute removes it from the flow, getting rid of the flicker.
If you want to move the submenu relative to the parent, add position: relative to the parent and use top and left (bottom and right aren't really useful) to move it.
For more information, see this CSS-Tricks article.
.menu-main-items{
display:inline-block;
position: relative;
}
#submenu{
display:none;
position: absolute;
left: -10px;
}
li:hover #submenu{
display: block;
}
<ul>
<li class="menu-main-items">Item1
<ul id="submenu">
<li>Sub-item1</li>
<li>Sub-item2</li>
</ul>
</li>
<li class="menu-main-items">Item2</li>
</ul>
Li : position: relative;
Ul.submenu : position: absolute;
You can position the submenu relative to the li using:
Top, bottom, left, right.
Example
Li {position: relative}
Ul {position: absolute;top:25px;left:0;}
You can hide and show on hover
Ul {display: none;}
Li.mainmenu-items:hover > ul {display: block;}
The > in the css rule means it only targets the first element of the specified child under it. So this is the first level of ul,s inside of the current item hovered
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.
A series of ul elements contained within separate div elements need to not only have the correct content in their :before pseudo element, but also keep the bold tag titles adjacent to the lists.
Additionally, when there are no lists present within the div in question, nothing should appear whatsoever. This is why I'm looking for CSS as a solution, because if I hard-code the titles within the div it will appear if there are no lists present.
I cannot predict which instances of this unique div will have a ul within ahead of time - our application generates content based on user input from drop-down menus, and so if a menu is never used, a ul is not created.
I am unable to use JavaScript of any sort for this labeling process.
This is what I would like to see:
Foo Items
List One
aaaa
bbbbb
cccc
List Two
defdefdef
ghighighi
Bar Items
List One
xxx
yyy
List Two
zzzzzzz
aaaabbbbccc
At present I am trying to use the alt attribute of the ul to populate the div:before area. This is with the hope that there is a way to define CSS which says "for each div that contains an .exam class element, place the ul's attr(alt) in the div:before element".
This is what I've tried:
<div>
<b>Far</b>
<ul class="exam" alt="Foo Items">
<li>Stuff</li>
<li>Things</li>
</ul>
<b>Near</b>
<ul class="exam" alt="Foo Items">
<li>dunno</li>
</ul>
</div>
<div>
<b>Far</b>
<ul class="exam" alt="Bar Items">
<li>Foo</li>
</ul>
<b>Near</b>
<ul>
<li>bar</li>
<li>eggs</li>
</ul>
</div>
And the CSS to go with it:
div > .exam:first-of-type:before {
content:attr(alt);
font-style:italic;
}
ul {
margin:0 0 1em 1em;
padding:0;
}
li {
margin-left:2em;
}
Please see the jsfiddle link here - https://jsfiddle.net/f6gwyvuu/
I realize it's all a bit convoluted but unfortunately this is the result of working around the way in which the application generates its content. I don't really have control over that, I can only stylized the elements it creates.
Thanks in advance.
First, ul elements can't have an alt attribute. You can use custom data-* attributes instead.
And it doesn't make much sense to repeat the same data in each ul. Instead, add it only to the div.
Then, you can use
div:not(:empty):before {
content: attr(data-alt);
display: block;
}
div:not(:empty):before {
content: attr(data-alt);
display: block;
font-style: italic;
}
ul {
margin: 0 1em;
padding: 0;
}
li {
margin-left: 2em;
}
<div data-alt="Foo Items">
<b>Far</b>
<ul class="exam">
<li>Stuff</li>
<li>Things</li>
</ul>
<b>Near</b>
<ul class="exam">
<li>dunno</li>
</ul>
</div>
<div data-alt="Baz Items"></div>
<div data-alt="Bar Items">
<b>Far</b>
<ul class="exam">
<li>Foo</li>
</ul>
<b>Near</b>
<ul>
<li>bar</li>
<li>eggs</li>
</ul>
</div>
If you must do this, try
div {position:relative;} /*let this be the absolute container*/
div > .exam {position: static;}
div:not(:empty) {padding-top: 30px;} /*for div with generated content, only works for short titles*/
div > .exam:first-of-type:before {
content:attr(alt);
font-style:italic;
position: absolute;
top: 0;
margin-left: -1em; /*compensate your ul margin*/
}
ul {
margin:0 0 1em 1em;
padding:0;
}
li {
margin-left:2em;
}
This works for short titles, but maybe tweak it to work for long titles as well.
JSFiddle
I think you are looking for :empty and :not css selectors.
You can do something like this:
div > .exam:not(:empty):before {
content:attr(alt);
font-style:italic;
}
ul {
margin:0 0 1em 1em;
padding:0;
}
li {
margin-left:2em;
}
JSFIDDLE
If you are trying to change styles of previous sibling, then it is not possible using css. You better add another attribute as you did by adding alt attribute. And also it is best practice to add our custom attributes with a prefix as data-.
This is my code for a drop down menu. I pulled the code from a tutorial that produced this: http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html
But instead of text navigation I have images as you can see in the CSS attached to the span id's. With this code, I'm given the dropdown menus for each span correctly, I just can't get rid of the white space between them.
I know a new line in HTML between divs/spans create whitespaces, but I want to know a way to rid of them in CSS.
<div id="menu">
<ul class="tabs">
<li class="hasmore"><span id="bird"></span>
<ul class="dropdown">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li class="last">Menu item 6</li>
</ul></li><li class="hasmore"><span id="wild"></span>
<ul class="dropdown">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li class="last">Menu item 6</li>
</ul>
</li>
</ul>
</div>
This is some CSS that applies:
#menu ul
{
margin: 0 auto;
}
ul.tabs
{
display: table;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
ul.tabs li
{
margin: 0;
padding: 0;
list-style: none;
display: table-cell;
float: left;
position: relative;
}
ul.tabs a
{
position: relative;
display: block;
}
#bird {
background-image:url(images/birdingnav.png);
width:80px;
height: 20px;
text-indent:-9009px;
font-size: 0px;
border: 0;
}
#wild {
background-image:url(images/wildernessnav.png);
width:119px;
height: 20px;
text-indent:-9009px;
font-size:0px;
border: 0;
}
What do I need to do to this code in CSS to get rid of the white space that appears between my span images?
This is a common problem. More common with inline-block than inline, as inline usually means it's in the flow of text, where white space is relevant. With inline-block, people are using it for layout, and the white space becomes a problem.
There is a new CSS property specifically trying to deal with this issue - white-space:collapse; and white-space-collapse: discard;, but sadly it isn't supported by any of the major browsers yet. So that's not an option.
In the absence of that, the solutions to this tend to be a bit hacky.
One common solution is to set the container element to font-size:0;. This effectively renders the white space irrelevant; it's still there, but doesn't take up any space. The downside here is that you then need to set the font-size back again for the internal elements. If you're using a dynamic layout, with em based font-sizes, this can be tricky to handle.
Switching the layout to a float:left layout will remove this issue, but introduces other problems. Personally I've never liked working with float, but it might be the answer for some cases.
You could also use Javascript to remove the spaces, but that really is a hack.
Other than that, re-arranging the HTML code to remove the spaces is the most likely best solution. I know it's not the one you wanted though.
Try setting display: inline-block on the image elements. Spans are supposed to be inline, so the best solution would be to not use spans at all, but since you said don't change the html...
See how there's no spaces between the images in this fiddle: http://jsfiddle.net/rVTZc/
From this style:
#menu ul li a:hover span {
background: url("images/topselectionright.png") repeat scroll right top transparent;
}
remove
right top
If I understand you correctly, maybe ul { font-size:0 } would help?
I have a menu which has sub-menus and I have defined it as such:
<nav class='top'>
<li>Lanky</li>
<li>
Links
<nav class='sub'>
<li>dead beef</li>
<li>cafe feed</li>
</nav>
</li>
<li>Locks</li>
<li>Linger</li>
</nav>
I style it in such a way that the sub nav appears beside it's parent when on hover.
Problem is, I cannot click on those links. When I hover over the parent, the sub menu shows to the right and the Locks link displays beside the sub-menu (this is expexted). But once I mouseOut - say to try and click on dead beef, they disappear and the Lock link jumps back to its original position.
How do I make the sub menu persist to allow the mouse slide over to it?
To make your code compliant and accessible, you need to use the <ul> tags.
I suggest wrapping your <li> within the <ul> tags to fix your navigation errors - where you can also apply your class to the ul tag and there is no need for an additional div.
<ul class='top'>
<li>Lanky</li>
<li> Links
<li>
<ul class='sub'>
<li>dead beef</li>
<li>cafe feed</li>
</ul>
</li>
<li>Locks</li>
<li>Linger</li>
</ul>
Fixed this by addressing the list elements that had nav containers nested within. Many thanks to thirtydot for pointing me to jsFiddle - an amazing tool!
Here is the CSS...
nav { text-align: left; }
nav li { display: inline; text-align: center; }
nav a { display: inline-block; }
nav li { width: 95px; }
nav li nav { display: none; }
nav li:hover nav { display: inline; }