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.
Related
Any way to do this kind of tab design? I can't seem to get my hands on good code online to accomplish it. There's two border-radius for each tab. IS it even possible?
You can use an internal div in each tab and set border for that.set border for your main tab and now you have two border
A quick Google search for "css curved tabs" gives an excellent article from css-tricks.com as the first hit: (Better) CSS Tabs With Round Out Borders. The code is right there to copy and paste, but here is a summary of the css tricks involved:
Use the css :before and :after pseudo-elements to create the tab's rounded elements with curved border-radius styles. (These pseudo-elements with position: absolute essentially provide two extra drawing layers - think of layering a transparency sheet on top of your tab's <li> html element, and drawing your tab's rounded elements on top of that).
Use clever box-shadow settings on the rounded elements to hide the square edges of the underlying <li> element.
Use slight negative margins on the <li> elements to allow the tabs to overlap each other.
This keeps all the css styling on the same element, and is easily configurable with different gradients, color schemes, and styling elements.
It's definitely possible, but a little bit tricky, because the effect has to be simulated somewhat. For example, for the right edge of the middle tab, the top border curve must be defined using border-radius on the middle tab, but the bottom curve must be defined using border-radius on the right tab. The rest of the effect is done by having elements behind the tabs with the appropriate background colors.
There are several ways this could be accomplished with images. You could do background image with a transparent png, for example.
I have a Flexbox based nav menu with a logo aligned in the horizontal center of inline links. Every pen or fiddle I tried making of this doesn't replicate what I'm getting for some reason, but you can go to this Flexbox test here which is almost exactly what I'm working from and if you go into an inspector and add an anchor to the main logo image you'll see what I mean.
The way this is set up is the third link has a left margin of auto applied to fill in the extra gap for the logo to fit in. The logo area is separate from the nav menu in the markup but flexbox layout puts them all in line with each other (at lower breakpoints the nav menu moves down).
Now this all works fine and good until you decide to make the logo a clickable link. When you do that, the margin from that third link obscures the hover state of the logo.
Here's a visual example:
So if you tried hovering over the logo where the margin area intersects it, you would not be able to click the logo, nor get a pointer cursor or any hover states (like a background change). Outside of the margin while over the logo, it works fine, but to a user, they're going to think something strange is going on. This happens if the logo is an img (as it is in the original example) or an SVG (as I'm trying to use).
Trying to see if there's a way around this without having to completely nuke my Flexbox layout. My markup is very similar to what is being used in that example. I've tried toying with a higher z-index for the logo compared to the nav, which didn't work. Giving the nav a negative z-index lets you click the logo but then you can't click the nav items.
You can add a relative position to the logo and then play around with the z-index to make the logo the first element.
.logo {
position: relative;
z-index: 1;
}
I'm making a menu with <ul>/<li> and CSS.
Here's what I have so far: https://jsfiddle.net/gANfS/6/
The problem is that if you mouse over the top edge within the 5 pixel margin, it starts getting crazy and going back and forth between the hover and unhovered state because the size of the block grows and shrinks. How can I fix this? When I shrink the li, I don't want to be shrinking the hover area. That would fix it, but I'm not sure how to pull it off. Ideas?
this is a hack job...but it will work
instead of magin-top:5px;
do border-top:5px solid black;
if you want your background to to be a different color, just make sure to set the border color to the same color.
Wrap your li content into a div, then apply your shrinking to that div (.sel div:hover instead of li:hover) and this should make it.
The reason for that is on mouse over, the button moves down and sets a margin-top 5px. Then, if the mouse is over that top edge, the button no longer has "hover" state and it retracts back. When it does get back, it switches to mouse over state and the journey begins again.
You could use padding-top:5px instead of margin-top and set the HOVER effect on the whole container. Padding, as opposed to margin, is space inside the element. That way, when the mouse is over the top edge, it would still be considered as over the element and it will not flicker anymore.
I made a tabbed box using css, html, and jQuery. I would like to be able display the selected tab slightly larger or taller than the other tabs. When I increase the height and set a negative margin to the parent ul on the selected tab, the top of the border completely disappears. Here is the tabbed box I'm working on. I've been sitting here almost all day with the chrome element inspecter trying every variation I can think to make the selected tab slightly taller and cannot seem to make it work. I've come pretty close messing with the heights, margins etc..but the border on the parent div extends all the way up to the top on the right side:
This is the look I'm going for though; the video library (selected) tab is a little taller than the others. If, in addition to the link, you whould like me to post the code, let me know. I'll be happy to do so.
I've just a quicker tinker on chrome and this seems to do the trick.
If you apply the following to the active tab:
margin-top: 0px !important;
Then set margin-top: 5px; to all li elements.
Deleting this line from your CSS seemed to help me. Try playing around with the styling on a
a:hover, a:active {outline: none;}
In FF and IE8 things look pretty good. I have a mock up of the drop down that I'm trying to create with rounded corners at bottom here: www.geowinedb.org/drop-down-test/test.html. In IE6 the mega div is extending to the far left edge of the window. What do I need to change/add (e.g. underscore hacks) to get the drop-down to shrink-wrap its contents (the ul).
p.s. I'll be back to ask about the z-index problem that blocks the drop-down (IE6 again), but if anyone want to answer that as well it will be much appreciated.
EDIT 20091107: More specifics on the requirements: It must work in IE6+ and the drop down menus cannot be fixed width. The client wants to be able to change menu item text at will and have the drop-downs size automatically.
EDIT 20091111: I never did find a great solution. The menu along with some other requirements for hover changes, meant that JavaScript was necessary. So, I found that I could position each main menu item absolute, then position each sub-menu div absolute (this solved the z-index problem), and lastly I computed the width from the underlying ul and set the outer div width. Then the rounded corners positioned themselves correctly on all the browsers that I needed.
Does it bother to use fixed width for your UL (and maybe UL.mega-b too) ? because this way you will definitely avoid this problem.
display:block in your UL can also be the cause of this.