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.
Related
A client of mine saw this awesome scrolling effect when clicking on a menu item: http://www.feedmusic.com/
I'm talking about the grey/purple overflow between the two anchor menu items.
I've been Googeling around for hours and can't find anything like this. Does anyone know how to achieve this?
Thanks in advance!
It's singlepage application with disabled scrolling. I haven't experience with singlepage, but here are ideas which looks like it could work:
Create two divs between content one gray and second purple (or one with two colors in the background). Then create scrolling via js (jquery) on button click.
If it's ajax loaded, there could be only 3 divs: one with current content, one with gray/purple background and third with new content and js should place the divs to required places. But first solution should be easier.
Implementation is up to you.
I am relatively new to CSS but wanted to have a nav dropdown that behaves like to downloads on the OSX dock, meaning the items are not in a straight line, but fall out in a curved formation (and from header and down), with same style of animation.
If somebody has a suggestion on how to proceed creating that (main steps), or perhaps such a nav dropdown already exists that I could use?
A simple straight dropdown seems soo traditional...
EDIT:
Here is a screendump of the osx dock download list:
But I want it to be "falling down" from a header nav, so it would perhaps look more like this (without the icons for each dropdown list item (here files), and perhaps a little bit more like a waterfall)...
Not (easily) possible with CSS. You should probably use javascript.
Here's an example: http://code.tutsplus.com/tutorials/jquery-os-x-style-dock-and-stack-navigation--net-5535
Demo (bottom-right).
I'm having trouble figuring this one out, it's a menu I am changing a bit to make it more usable on touch devices. Thus I need the first part of the CSS to stay as it is for normal screens, and then have to overwrite it with the touch styles. But I am trying to position the sub menu of services below services when services is selected. See the sketch. I have created a fiddle to show my problem.
My main problem, and what would solve it, is that I can't seem to get the ul.level_2 to position itself under the selected li, neither with absolute position or floating and clearing. Any ideas?
JS fiddle of problem
I sipmlyfied your example a bit to show you what is the minimal required css to achieve this. http://jsfiddle.net/3EKAq/10/
The positioning of the submenu should be fairly easy, it goes almost automaticly, no positioning required as you can see.
I think the key lies in the clearing of the menu element you want to appear on the left, the 4th one in this case. You could also consider working with the :n-th child css3 selector, but i would not do that for cross browser compatibility.
Hope this puts you in the right direction. Feel free to let us know if you need any more help!
I'm looking for the CSS code to create a multi level vertical menu with no Jquery or javascript just pure CSS.
I have the HTML part done and ready to go!
You should follow this guide until step 3.
In case that site ever goes down essentially what you are going to need to investigate is using the :hover selector to show and hide various parts of the menu at any given time.
The flyout menu from www.cssmenus.co.uk might be worth looking at?
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.