Can someone tell me why the CSS dropdown menu (rollover "Software Solutions") works here :
http://deltaassocc.web704.discountasp.net/temp/page-works.html
but not here:
http://deltaassocc.web704.discountasp.net/temp/page.html
This has been driving me crazy! I'm using Firefox 3.0.10. Please help..
There is an awful lot of knowledge built into a CSS menu to cover different browser versions and so on. My advice is don't do this yourself. Get a prebuilt one like suckerfish (or one of the many variants).
Alternatively you can use a Javascript based solution like superfish as suggested here.
Note: if you need to support IE6 then you'll be using Javascript for that browser anyway as it doesn't support the :hover pseudo-element on anything other than anchors.
Because you are loosing focus on the parent element. On the second one, there are more elements below and when the dropdown extends it goes under the content container - you move your mouse down and it's over the text content container, not over the menu container no more.
Install web developer toolbar and outline box elements, you will see that.
Google for jquery dropdown menu or other javascript-framework based solutions, they'll work fine and cross-browser, unless you're doing it just for self-education.
The pages look the same in IE8 and Firefox. The menu drops down but doesn't look at that great. If your using JQUERY SuperFish is a really good cs-menu.
Related
I'm very new to this and don't know how to use javascript or jquery and would prefer to avoid using it in all possible cases as I know it's not compatible in all browsers, takes time to load and can be disabled by users.
I've already made and designed the menu but would like the main heading in the menu to change to the submenu link when clicked on whilst keeping the rest of the menu in tact. How do I achieve this in css?
You can take a look at http://davidwalsh.name/css-target and use the css target selector (But it's not supported in IE - I haven't checked IE10 though).
but-
If you want to change the text or href attribute then, it's not possible in pure css (correct me if I'm wrong). You would have to use javascript. Jquery makes it easier to make your site support most used browsers, why not give it a go? I am certain if you get stuck, people on Stack overflow would gladly help you.
on a sidenote, css can also be disabled by the user (and not all browsers support all css features). Css and Javascript are in the same boat, because the browser dictates what is supported.
Hi all I am working on a project and am trying to do this all by hand for a learning exercise. I am not looking for the code that does the job but just an explanation of how this should be done.
the page I am working on is http://dev.davydsoft.com/playing.html
What I would like is to have a dropdown "menu" image when you hover over the pics up top. This is inspired and by the twitter bar. When you click on your user name on the twitter bar you get that dropdown.
I have played with alot of examples and for some reason it just wont click for me.
Any pointers would be great.
welcome to the stack overflow! I would recommend that you take a look at the first tutorial on this page:
http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers
It explains how to use jquery (javascript) to show and hide hidden html elements.
If you are looking for a css only solution, you might search for "css suckerfish menu".
You need javascript for the hover event css for styling and html
Have a look at: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/
Basically, if you only want guidance, then start looking into how to style with :hover selectors.
I've been using the SuckerFish menus for pretty much ever right now... however I need something a little newer. mainly something that will handle drop-down items and fly-outs of variable widths. i.e. I may have 6 drop-down main items, each sub-menu needs to be a variable [dynamic] width AND the fly-outs for each are also of differing widths.
SuckerFish does not handle variable widths for the drop-downs particularly well .... has anyone got any suggestions?
The site is using jQuery, though I am not too hot on javascript 'anything' for navigation a pure CSS would be nice if possible.
-thanks
-sean
CSS has limited animations with limited browser support (looks like only the latest WebKits).
For a cross browser animated menu, you'll have to leverage JavaScript.
jQuery will make doing it quicker and less painful, but is not a requirement.
You could set things up with your usual SuckerFish as a baseline and then add Superfish on top of that to provide the fancy animations and what not. Superfish is built with jQuery so it should drop in fairly easily.
I have a requirement by which I need to have something like below as the background of my asp.net menu item background.
NOTE: The menu is populated by sitemapdatasource which is dynamic depending on querystring.
I was doing some googling up and found that I can apply JQuery's rounded corner functionality along with asp.net menu item.
Has anyone got any better solution or probably an example of JQuery's rounded corner and asp.net menu item example.
Thanks,
Nimesh
Another option is to use CSS instead. This works even when JavaScript is turned off.
Unless you can control the browser clients use you will need to use CSS3PIE to get it working with Internet Explorer though.
The CSS properties you need are -webkit-border-radius, -moz-border-radius, and border-radius. If you include all three, and set them to the same value, the vast majority of browsers will render the rounded corners for you.
Also, there will be no visual lag in the rounding as there is with JavaScript sometimes.
EDIT: The CSS selector will be basically the same as the JQuery one.
Is there any way, how to make rounded HTML <select>, without using any javascript?
I have this insane design and I have absolutely no idea how to do it only with CSS.
The same problem is with checkbox and radiobutton. Does anybody know how to make them rounded?
I need solution that works for IE6+, Firefox 2+, Opera 9+ ...
alt text http://uploader.chytry.cz/select-checkbox.png
No. Form styling is very problematic, there are no guarantees that any styling will work. Simple borders and background colours/images generally work OK in most browsers. I believe Safari will let you style very little. Check this page for more detailed info.
Honestly, the best solution is to use javascript. jQuery click menu is a great solution I used recently to mimic a select box (used JS to set a value on a hidden field when an element in the menu was selected).
I'm sure there are other solutions around too if you search.
No.
Now the long answer: Internet Explorer does not lend itself well to being styled. You will be able to set a background image for the left-hand side (the text content) that has rounded corners, but the drop-down arrow will be fixed as the default browser. You'll also find that the mousedown and mouseover states for the control will be fixed as the default style.
I think that in many cases, the ideal preferred design needs to be a little pragmatic about limitations in browser standards support. Specifically, the problem that IE6 doesn't support a fair number and IE7 is only slightly more compliant.
Sorry for the bad news.
no
please see this site for radiobutton and checkbox
http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/
No, Whit out javascript or jQuery you can not do this. But if you need with jQuery try this link. It contains the HTML select box with rounded corners by jQuery.
http://webworld-develop.blogspot.com/2011/11/cool-html-5-select-with-jquery-and-css.html