I have an asp.net menu control embedded into a div in my website.
My problem is I will have 15 to 20 menus and the menu control looks cluttered when I show all the menus something like the below.
I am thinking of applying css to the menu control however i dont know how i can control the amount of items displayed in the menu. I cant remove the items as they are mandatory. What I need is the first 5 menu has to be shown and the rest has to be shown in drop down list or with scroller like the below screenshot
I need the menu control to be displayed like the below one
or
Can anyone please help me to resolve my issue?
EDIT
I have managed to get all the menus in a single row by changing the list style from list to table.
This has solved my clutter issue however the menus are going beyond the div view width. I tried changing the width but it didnt helped me. how to set the limit to show only few menus and provide scroll support feature to see the remaining menus.
I think you are looking for something like this: http://www.eyecon.ro/bootstrap-tabdrop/
Let me know if it works out, looks promising, but I never tried it.
EDIT
Ok, I tried it. If you want to have specifically 5 of them or similar. You could do something like this in css:
ul.nav > li {
width: 15%;
}
See fiddle here.
(Try resizing window)
Related
I am having problems with my drop down menu. When I try to click on one of the links in the sub-menu, focus is lost from the parent and so the menu disappears, making it impossible to follow the links in the sub-menu. I have searched this forum and google and although there are many similar issues, I can't find any solutions to my particular problem. I would greatly appreciate any help on this. The site is www.emmatuscaloosa.com and the sub-menu is under the "categories" button.
Dont display the sub-menu none.. rather hide it with opacity.
I worked out a pretty simple fix for this by adding some CSS to the sub menu hover state. Im hiding / showing the sub menu using the max-height property and fixed the issue by writing:
.sub-menu:hover {
max-height:100%
}
That simple! Whenever the mouse is hovering on any sub menu item the menu must stay visible, allowing enough time to click on the enclosed links. Not sure if this is the "proper" way to fix the issue but it's working like a charm.
Dont' use focus. There are other ways, for example you could use :target or :hover to open the submenu. Using target, you will have to add an id to the submenu.
Target:
.sub-menu{display:none;}
#categories:target{display:block}
Another way is to use Javascript.
I am having trouble getting the facebook pop out dialog to be on top of my nav bar and slideshow here:
http://d14599.u62.c14.ixinstant.com
I have search for several hours and all the solutions have not seemed to work. Here is a list of what I have checked:
-overflow:hidden on other page elements causes problems. I looked into this but my nav bar does not have this property.
-z- index only works for positioned elements. I made sure my elements were positioned relative or absolute.
-I tried directly styling the js created facebook elements using things like
.fb_iframe_widget{
display:block !important;
z-index:9999 !important;
}
I'm not that good with CSS but have never been stuck this long on one single issue.
I am assuming the issue actually is with something I have done wrong elsewhere on the page, like the navbar itself, but I cannot see what it is. Any thoughts would be greatly appreciated.
I searched lot of things and tried it too but no solutions worked for me. I found one quick fix to solve facebook like dialogbox overlap issue here and it worked for me.
Hope it could save others time, Cheers!
It doesn't really solve the issue, but what I have done is to hide the comment box. For this case it was acceptable. In the css file I added:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
display:none;
}
What worked for me was to set the z-index for the element that holds the Facebook like button to be higher than the element the comment box was shown behind.
Wondered if anyone had any links to a tutorial for a navigation bar in css (not javascript). I'm after a 2 tier horizontal bar. the bottom tier being also horizontal.
Just like the following image
any pointers would be a great help!
cssplay.co.uk has plenty of dropline menus. Just look under "Multi-Level - Dropline". Pay attention to copyright though.
I think you just mean two tiers, and they are both visible all the time, not that the second tier is visible on hover, correct?
If so, here's a basic fiddle example: http://jsfiddle.net/jblasco/XAE9c/
Anyway, the idea is to use two ul lists, and place the li elements of your nav in them accordingly. You can then style the list items however you want from there, as well as add links to their content, etc.
If you have a dynamic page, you would do a simple server-side check for if ($PageURL == "blah.php") { and spit out class="active" on the current tab, and style that however you like.
I'd suggest using inspect element on some nav bars you like, and going from there.
The solution without Javascript for IE hover hack http://webstuffshare.com/demo/New-CSSTabMenu
but it may not behave in the way you want, are you after reveal on hover?
http://www.webstuffshare.com/2010/01/updated-pure-css-tab-menu/
THE guide: Suckerfish Dropdowns.
http://www.alistapart.com/articles/dropdowns
You'd just modify the styles to be fully horizontal.
I've read through the forums and have not been able to find a question similar enough to mine for me to fix my website, so I hope someone can help.
I'm building a website for my local school which has a top navigation and a left side navigation. I've written the top navigation as a list and styled in CSS and use Body ID to highlight the navigation item of the page I'm on, that all works great and I'm going to move that to an include in PHP so I've only got one file to update for that.
On each of the sub categories though, I have a side navigation, which is currently manually programmed and manually highlighted, but I'd like to be able to do the same as the top navigation, have a list navigation and have something like Body ID which automatically highlights the left navigation item when it knows it's on the right page. I've tried adding two Body IDs and this didn't work. Is there a smarter way to do it?
Here's my test site which is work in progress at the moment.
http://www.antbird.net/school/
Thanks very much, I appreciate any help I can get.
Ant
You can only have one ID for each element.
However, you can use that <body id=" "> when setting the left nav.
I really like what History has done with their show pages. Anyone know where I can find resources (or a name so I can google it) like what they have?
Example: http://www.history.com/shows/american-pickers where it says Full Episodes, History Pop Shop, etc.
You just need to make the image be visibility:hidden (with css) so that it maintains its space, and make it visibility:visible on hover of the container.
demo code: http://jsfiddle.net/gaby/hj4gH/2
You can put the detail popup inside the hover trigger, hide it, and show it in a CSS rule targeting a.Trigger:hover div.DetailPopup.