I've got a css-based horizontal drop down menu that works perfectly well, but I'm having trouble adding an effect that adds a top border on the item that represents the page the user is currently on. Here's the HTML code for the dropdown:
<ul id="browse">
<li>
Comedy
<ul>
<li>Caddyshack</li>
<li>Back to School</li>
<ul>
</li>
<li>
80s
<ul>
<li>Die Hard</li>
<li>Overboard</li>
<ul>
</li>
</ul>
Here's what I want:
Hovering over an item changes its background color, as well as the background of the dropdown (the nested ul element)
On the active page for an item, that item should have a 2 pixel tall colored border at the top.
Just to be clear, the dropdown already works fine, and I can already identify the "active" menu item. I just can't seem to figure out how to combine changing the background color on hover and adding a border-top on the active menu item without messing up the style of the menu somehow (either leaving a 2px tall blank space on hover, or having the hover background property override the border-top property on the active item)
I should also add, CSS-only solutions please.
Any help here would be much appreciated.
For the background color, it's fairly simple, just use code similar to this:
#browse a:hover {
background-color: fuchsia; /*Whatever your background color is*/
}
As for the border effect, that's a little harder to do semantically, but I feel that this article on CSS specificity would do the trick. Basically, it involves adding an id to your body, and then referencing that id in the CSS so that only the specific pages will be affected.
EDIT: If you're having issues with your top border affecting layout (I don't know what orientation the navigation has), try reducing the margin or padding you have on each item by the size of your border (2px, in this case) to maintain overall box height. If you don't have any margins/paddings, try negative margins.
Related
A sub-menu div in a navigation bar isn't displaying on hover in OS X Safari 10.0. It works fine in Chrome and Firefox.
Here's a JSFiddle: https://jsfiddle.net/rk5bmpud/1/
If you hover over "Our Services", then one sub-menu drops down, then hover over either "Risk Management" or "Integrated Services" and another menu should slide out from left to right. They do in other browsers, but not in Safari.
The elements in question are:
<div class="sub-menu">
<ul>
<li>
Risk Management Consultancy
</li>
etc...
</ul>
</div>
Safari's dev tools show that the div is opening and closing on hover as it should do (you can see the blue box highlighting the div when it's open), but the div and none of it's children are displaying.
I've tried different display properties, position properties and z-index in CSS. Different position properties allow me to see the div and it's contents, but of course not where I want them to be.
Can anyone see what I'm missing here?
Update
I've discovered that if the sub-menu's grand-parent div, with class .menu, is set to position: static; then the sub-menu in question is displayed. This isn't really a solution as I don't want to have to re-build it this way (although I will as a workaround if I can't find a proper solution). Interestingly, the position property of the sub-menu's immediate parent, <li>, doesn't make a difference.
I have two spry menus on one page. One is main site and one is that individual page's menu that shows and hides div accordingly.
The "artistMenu" div doesn't work and it doesn't even have the hover effects, although it's set up exactly like the site menu apart from the different UL id's
<div id="artistMenu">
<ul id="MenuBar2" class="MenuBarHorizontal">
<li>Social</li>
<li>Music</li>
</ul>
<!--Artist menu end--></div>
CSS:
#artistMenu{
background-color: #000;
}
The main site menu is set up virtually the same way except it's in the header div with logo and has no background.
If I comment out the <div id="artistMenu"> the link's work however, I lose my background color and the contents below the menu, for whatever reason because un-styled as the pop out of the <div id="gridContainer"> and and spread the width of the page.
I've worked on this for 5 days off and on and can't figure it out nor find info online.
I am having a bit of trouble styling a navigation menu where you can select packages.
This is going to be a nav menu for a mobile website.
The active green li tab I need to be evenly spaced across the full with of the ul
My problem is when I click on the tab to make it active the green doesnt fill up all the li and blue is still visible.
Secondly on the green active tab li I need to display a down arrow at the bottom center of the active tab.
I have included a fiddle with it more or less done, just need help with styling it to finish it off.
http://jsfiddle.net/8C3U3/
<ul id="navlist">
<li>Basic</li>
<li class="spacer"><a class="m-active"href='#'>Standard</a></li>
<li><a class="m-active"href='#'>Premium</a></li>
</ul>
I. Why does the blue still display?
The blue still displays for a few reasons. I'll go through each of them.
The first reason is that you've given your lis padding and a blue background color. Yet you assign the green background color to your as. Since the a is contained within the li, and the li has padding, the a couldn't possibly extend the full dimensions of the li and cover up the blue. View this JSFiddle, where that problem is corrected.
The second reason is that your lis are set to be inline elements. Inline elements interpret all whitespace in your code (spacebar spaces, new lines, etc.) as a single space between the elements. To get rid of that spacing, get rid of the whitespace between the elements in the code itself. View that here.
Unsolved questions: You'll see that there's still blue visible. This is because borders are rendered outside of the element, and this border doesn't extend the whole height of your li (let alone the ul, which also has a blue background set). You'll need to figure out how to handle this. One option is that you could use :before and :after pseudoelement so that the spacing between the elements is closed.
II. Making an arrow beneath the active tab
The way I usually make arrows is with an :after pseudoelement. Here are the steps:
We want to position the arrow as we want, which is best done by setting it to position: absolute;. To make it relative to the parent, we need to explicitly define the position on the parent. So let's go with position: relative;, as that won't change the location of the parent. Now we can move the arrow around wherever we want!
Let's set the pseudoelement to be display: block; and give it empty content. This makes it display as we want it to.
You can either use the border hack to create the triangle, or use the unicode triangle down character. I chose to use that in this JSFiddle.
Unsolved questions: Right now, your lis aren't the same width. This means that no single line of CSS code could center the triangles for all of the lis. You either need to set the lis to be the same width, then position the triangle, or target each li individually and manually place the triangle based on the width. I suggest the former of these two possibilities.
III. How I'd Do It
And here's how I'd make the menu, with most of the issues above resolved. Maybe this will be a place for you to work from.
If you're not planning on fading the arrow in, then you might prefer to use the border hack to create the triangle, which has deeper browser support.
I want to hover the space in each rectangle changing the background color and the color, but not changing it when you hover the text in other column. Did that make sense?
Example: Hover on "About" and not "Home" or "Contact" when hovering the text.
I really don't know how to explain this well, so if you please check this fiddle you'll see my problem.
For modern browsers use:
#bighome,#bigabout,#bigcontact {
pointer-events: none;
}
Or the most compatible way is to put the #bigxxxx spans outside the a-element. So
<li id="contactlink">Contact<span id="bigcontact">contact</span></li>
(you have to specify the font-color for the spans)
I'm working on a navigation like the image below.
The whole nav is the width of the browser window, but the items are centered to the design.
I haven't worked with any code in quite some time now, and am having difficulty getting this together. Should I use a body image to repeat horizontally and then position my list where it needs to be? Or Should I use a div to span the whole width of the browser window and position the list elements where they need to be?
Thanks
I'd go with using a container with a simple background colour and positioning the menu inside of that.
I'll whip up a quick example for you.
UPDATE
Here's a quick example I've just put together: http://jsfiddle.net/aQTRF/
Alternatively, if you require the black menubar to extend past the container of the navigation, it may be easier to add the bar as part of a repeating body background (as you've stated) and then position your nav over the top. This would also allow you to have a slightly different shade of menubar within the main content area compared to outside of it.
I would advise using HTML and CSS over images where possible. It will make the page faster to load.
How about something nice and simple like this?
Use an unordered list
<ul id="nav">
<li>Nav Item</li>
<li>Nav Item</li>
<li>Nav Item</li>
</ul>
Add your styles to #nav for the background