I've only been testing this in IE11/Win7 but since it doesn't work there it matters little to me if it works in any other browser. I need i solution that will work accross all browsers.
Im creating na html5 menu using only css. i have a background set for the dropdowns and am using :before to place na arrow in menu items that have a submenu. I also want the submenus to show up in a fade - and that's where my problems start.
At first i had the transition and the background set in the inner ul, and that worked - except :before counts as a child so the arrows would only show when the submenu was visible and that's not good.
So i placed a div around the inner ul and used :before in the div while i only fade the ul. Then the arrows would still show when the submenu wasn't visible, but when the menu was visible the background would show up only as a line accross the top (height 0 i guess)
So i placed the background in the div and now it workd except the fading only happens to the menu items themselfs and not the background.
here's a jsfiddle with my last attempt.
Is there a way i can make what i want? (show arrows always + background shows and fades in)
Related
I've customized a CSS Menu Maker dropdown for my site:
But as you can see, the shadow of the "banner" shows through the background of the dropdown.
How do I make it so the shadow isn't there when behind the dropdown?
Of course, it depends on how it's all constructed, so:
The "banner" is actually a 8px-wide transparent PNG strip, background-ed with repeat-x. (It has a transparent gradient so that the photo slideshow behind it smoothly fades at top.)
On top of that is the CSS Menu Maker dropdown—just unordered lists, anchors, and span, styled as inline-block and such. I can paste the code if needed but it's nothing out of the ordinary.
At first I created an alternate 8px "strip" without the shadow, but I can't think of a way to substitute it in the repeat-x only where the dropdown is.
Now, I'm thinking the shadow itself should be a separate PNG, but I still can't figure out how I'd make it invisible (e.g. visible: hidden;) only when behind the dropdown.
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've created menu drop down menu in pure css,
here, parent div have position:relative and the menu popup have position:absolute,
when the menu hovered the submenu will appear as display:block,
but here, hovering sarees (first menu) the popup menu appears perfectly, but hovering the last menu webmenus, the popup appers at wrong position (different position). The images uploaded below
I want to make the same position with all submenu popups like sarees's submenu popup have.
is there any css hack for this .. ?
Images :
I want this position for all menus
The menu Displaying at wrong position
I noticed that you are using position: relative to the menus, including the drop down menus. That is the why you are having this issue. You set the menu as absolute and it is understood as relatively to its respective parent. If you remove the position: relative it will set absolute position relatively to the page.
Update:
See a Fiddle HERE
and compare to this another Fiddle HERE
Did you see the difference?
Sorry if my english is bad
Remove position:relative; to each .menuTemplate1 li
That way the menu will open always on the left side, as your image shows.
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'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.