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).
Related
I was wondering if there was a way to get the nz-popover to center on another element.
I basically have a text input followed by two buttons in a div, I would like to center the popover on the div rather than on the button that triggers it.
I found that i could add the popover to the actual div and then use the nzVisible to trigger it but then i loose the ability to close the popup when the user leaves the area (prob when they hover over the mask or click it). I tried many ways to close it once the popover looses focus etc but that would cause the popover to close if the popover contains a menu or datepicker (when they are used).
Anyone got any ideas? (i used to use angular material and i believe they had something similar (think it was called target or something).
Thanks in advance,
For anyone who is interested in this, we have submitted a PR to provide this feature. You would be able to use this in 9.x (and future) versions.
CSS
jamesburnett.com
When viewing the site mobile size screens, the main menu becomes a drop down menu. When you attempt to click on it, it blinks for a second or two but doesn't ever drop down and stay. I've tested on iOS and Android, as well as just using the google inspect element. It fails to drop down on there too. I'm not quite sure what's wrong and any help would be greatly appreciated!
You likely have deeper problems with the way things have been set up in html and/or js. #main-menu > ul.menu{display:none;} for media widths below 767px. Whatever is toggling display on the menu when you click is possibly triggering more than once or maybe not setting/toggling the classes the way that it should. Double check your naming, you might not be setting dt-menu-expand class, which, although it's hard to tell, it looks like that's what you intended from your css.
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!
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 wanted to create a Flex LinkBar that looks similar to the iGoogle links. The links are expandable (one level-deep) by clicking on a plus button. I've considered styling a Tree or Accordion to get the desired look and feel. But before I spend time on one approach versus another, I thought to ask first.
Does anyone know a component that I could use to achieve this? Or an example of someone doing a similar vertical navigation bar? It should only be one level deep and some parent nodes might not have children (doesn't expand).
Thanks in advance....
Just wanted to update with what I actually implemented. I ended up using a Tree and styled it to look and behave like a linkbar with that can have child links.