I am trying to implement a sub navigation menu under "Jewellery". The problem is I want a space between the two menus when they open. To achieve this I added "margin-top:5px;" to the sub navigation. It does create the space however as you can see as soon as I bring the mouse down to the sub navigation it becomes deselected.
What is the correct way to achieve this?
nav ul ul {
margin-top:5px;
background-color: #101010;
color: #FFF;
}
Link to jsfiddle
http://jsfiddle.net/2mpcQ/4/
You should use padding-top:5px and the black submenu inside this padded DOM Element
border-top: 5px solid #fff;
This will give the appearance of space between the Menu and sub menu.
and will still give it functionality.
You can use div tag sub menu to get the desired vertical space. I have modified your jsfiddle for reference.
.rowheight {background: #fff; font-size: 5px;}
<ul>
<li>
<div class="rowheight"> </div>
<ul><li>Item</li></ul>
</li>
</ul>
jsfiddle link -
http://jsfiddle.net/2mpcQ/25/
or can use border-top: 5px solid #fff; for nested ul but it is not controllable. It will affect all nested UL tags.
hope this helps!
If you want just to solve this issue, try adding border-top to .nav ul ul (border-top:5px solid #fff;). Though, your question was "what's the correct way to achieve this?". I think the right way is styling the "a" element, as Diodeus said.
Related
I want to create a nav bar that uses anchor links (the nav bar is fixed and the user stays on one page). By default, I'd like to have the first link in the nav bar styled with a background highlight to indicate it has been selected. If the user clicks on a different link on the nav bar, I'd like that link to be given the selection styling instead.
Is there a pure HTML/CSS method to do this?
Edit: I am currently tinkering with turning the nav links into secret radio buttons. I'll report back if I get it to work.
You can use the :active Selector.
a:active {
background-color: yellow;
}
This style will be applied to the last element you clicked on... once you lose focus though, it will not retain the style.
It would be much better to just change the class via javascript if you can, in my opinion anyway.
CSS
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + a {
background: blue !important;
color: white !important;
}
HTML
<input type="radio" id="x" name="selectedLink" checked />
<a href="#associatedAnchor1" onclick="document.getElementById('x').checked = true">
This is a link that will apply 'selected' style to itself and
strip the 'selected style from all other links in its group
</a>
<input type="radio" id="y" name="selectedLink" />
<a href="#associatedAnchor2" onclick="document.getElementById('y').checked = true">
This is a link that will apply 'selected' style to itself and
strip the 'selected style from all other links in its group
</a> <!-- and so on -->
It uses a tiny amount of JavaScript, but it's the closest thing to an answer that probably exists. Hope it's useful to somebody! :)
You can use :target and style with that. It would look something like:
li {
display: inline-block;
float: left;
border: 1px solid white;
}
a {
color: white;
text-decoration: none;
padding: 15px;
background-color: #bada55;
}
#targetDiv {
width: 50px;
height: 50px;
background-color: #bada55;
float: right;
border: 1px solid white;
}
:target {
background-color: purple !important;
}
<ul>
<li>First
</li>
<li>Second
</li>
<li>Third
</li>
<li>Target
</li>
<li>Target Div<li>
</ul>
The fiddle.
Note
This will interfere with the browser history, so you may want to watch out for that. It could also create a "jump", but if it's a fixed navigation you may be fine. The fiddle has a e.preventDefault() on the links to prevent the jump, but I think you could be fine without it.
UPDATED
Added a fiddle and included targeting other divs as per the comment.
I've tried unsuccessfully to fix this for the last few days:
the first time I open the page it has some weird padding on the dropdown menu, only happens on chrome (works fine on FFx and IE)
after the first time the page is loaded it loads fine
as you can see on the screenshot I've already put
.myCustomNav ul
{
padding: 0px !important;
}
the dropdown menu is called like this:
<div>
<ul class="myCustomNav nav">
<li>
<a .../>
</li>
</ul>
</div>
any idea what's wrong?
you can test for yourselves on http://istore.titus.biz/lovelovelove/#
Do you want to reduce the padding on the dropdown? Then reduce the padding on the following class in your css.
.horizontal-category a:link,.horizontal-category a:visited{
color:#96979D;
padding:4px 6px;
display:inline-block;
font-weight:bold;
border-right:1px solid #ec008c;
/*background:#09C;*/
}
Invalid solution - Comments below
You need to make the li for .dropdown-menu - display: block. This needs to be placed at the bottom of your nav CSS.
CSS
.dropdown-menu li {
display: block;
}
If you want to test this do this:
.dropdown-menu li {
display: block !important;
}
That should fix it, but do not use !important as your solution. Just make sure that the first snippet is below the other dropdown CSS.
changed
.myCustomNav li{ display:inline;}
to
.myCustomNav li{ display:inline-block;}
and it worked, just needed a few extra tweaks to position it then
I have created a dropdown menu and now want a background that drops down along with it. Here is some of my code:
HTML:
<div id="background"></div>
CSS:
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu li:hover div#background
{
display: block;
}
(I know there is something wrong with this code, this is what I picked up so far from the Internet...)
li are the list items that comprise my menu.
In the HTML code, the "background" divider is inside and at the end of another divider which contains the dropdown menu:
<div id="menu">
<ul id="navmenu"></ul>
<div id="background"></div>
</div>
ul is my unordered list which contains the menu.
What I want is to have the menu drop down along with the background. The background should also cover (be on top) of the text that comes immediately after the menu. (The menu drops onto the text).
I would have loved to post a picture to make it a little clearer but I don't have enough reputation points yet... sorry :S
If possible I'd like to do it only using css, but I'm also open for other solutions. Any ideas?
Your css is for a child of the li
This html code for your CSS
<div id="menu">
<ul id="navmenu"><li><div id="background"></div></li></ul>
</div>
The background of your HTML is the sibling of navmenu.
This CSS code for your HTML to show background when hovering over navmenu.
<style>
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu:hover +div#background
{
display: block;
}
</style>
If you want to do that from the LI you would need a parent's, sibling selector. I don't have one and would like one but jQuery could do the trick.
Adjacent Sibling (+) combinator is available in Internet Explore 7 plus and is CSS 2.1 standard.
Assuming you want the background someplace other than inside the li block, position:relative it to the area you want it to appear.
I want to create menu like this:
I want to see red square on acitve page and after hover. Menu is created by:
<div id="menu">
<ul>
<li><a href="#"><span>Home</span><a></li>
<li><a href="#"><span>About</span><a></li>
<li><a href="#"><span>Contact</span><a></li>
</ul>
</div>
I am trying to create this for 2 hours and nothing:( Can you give me an advice?
Here is a working jsfiddle for you:
http://jsfiddle.net/6sCZh/
li { list-style: none; float: left; background: url(http://getpersonas.cdn.mozilla.net/static/9/0/66090/preview_small.jpg) repeat-x; background-position: 0px 10px; }
ul { }
li a { display: block; color: #fff; text-decoration: none; margin: 14px; }
li a.active, li a:hover { background-color: brown; padding: 11px; margin: 3px; }
I've added a css class "active", which should be set server-sided with your php code or by setting it static in the html markup. Unfortunately I don't know a better way. Also a "clear"-tag would be nice because of the float :)
But maybe it helps a bit ;-)
The easy way to do this is to give your anchor tags (or, better, their parent li elements) a class when they are selected.
Then create a rule that targets li.selected and li:hover which places the red box.
I cannot be more specific without seeing your HTML AND CSS.
For the gradient you'll need CSS3 or image. I used gradient generator for the demo - http://www.colorzilla.com/gradient-editor/
The idea is the active link to be higher that the menu and with negative top and bottom margins which compensate for the height difference. And don't put overflow: hidden to the menu :)
http://jsfiddle.net/23zZE/
I have been trying to figure out how to make a nav bar like this one here: navbar
but as almost an absolute beginner, I have no idea which method to use here. Is it a UL or a table, and also don't know how to set these borders between the links which should most probably be inserted there as the images.
I know it would be more helpful if I wrote my own code here to be examined first, but I don't even know whether I should go with the table or a list with this one.
So, I would really appreciate if someone could give me a suggestion on that first and then i could write a code which we could discuss further.
Thanks
Although i prefer using UL for the menu,
it seems to be easier to achieve the effect with tables.
try making a table with two rows and 5 columns.
and:
remove the bottom-border of the first row.
remove the upper-border of the second row.
the borders of the cells in the second row.
also you may have to set the height of each row.
This can be done 2 different ways. The first one will be with image of a small vertical line which will be set as a background of the navigation button.
The other way is to be an absolute positioned <span> in the <a> tag with height as this border height and set top: 0 and left:0.
HTML:
<ul>
<li><span></span>Nav 1</li>
<li><span></span>Nav 2</li>
<li><span></span>Nav 3</li>
<li><span></span>Nav 4</li>
</ul>
CSS:
ul {
float:left;
border: 1px solid #000;
}
ul li {
list-style-type: none;
float:left;
}
ul li a {
display:block;
padding: 10px;
position:relative;
}
ul li span {
border-left: 1px solid #000;
height: 10px; <!-- as long as you want -->
position:absolute;
top: 0;
left: 0;
}
You can copy and paste that in your editor and see how it looks like.
And for navigations use <ul> with <li>'s. The <table> is deprecated and is no longer good to use it for that purposes.