I need to make tabs that also have drop down menu and requirements are that they have to work without JavaScript. Is this possible and is there good example of this somewhere?
see this http://www.lwis.net/free-css-drop-down-menu/dropdown.nvidia.com.html
it's pure css . see the source code to understand.
This is built by Free css dropdown menu framework http://www.lwis.net/free-css-drop-down-menu/
Minimal JavaScript code only for IE 6 or earlier. Everything else is pure CSS.
if u need pure css in all browser including IE 6 try this
http://www.cssplay.co.uk/menus/new-dropdown.html
but it has some limitations
Edit:
This is also pure css menu.
http://www.grc.com/menu2/invitro.htm
This includes IE5.x, IE6, IE7's betas, all old and new Netscapes, Mozillas, Firefoxes (on PC and Linux platforms), Operas, Safari and many other Mac browsers
Here is one Solution
Try Suckerfish, Javascript is needed for Internet Explorer as older versions only support :hover on links.
Basically you need to use the hover pseudo class on the anchor tag. To avoid using javascript you need to make sure navigation is structured so the anchors can do this as in ie6 this is the only element that allows hover. So using CSS for the off state you set the element that contains the dropdown to display: none and then on the hover you set it to display: block;
It is actually fairly straightforward - the hard bit is positioning the drop down where you want it.
Related
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Change style scrollbar div for my site
css scrollbar style cross browser
I wanted to know how to change the style/look/image of the web scrollbar via CSS? Is it even possible?
I don't think it's possible (in all browsers) with CSS.
It can be achieved with JavaScript though.
There is no standard CSS for doing this though IE and Opera have proprietary means of doing so. The reason is you would be changing the user's browser look which is not the purpose of CSS.
It is not possible to do this via CSS due to different browser engines/APIS. however you might want to use the jQUERY Solution
A good post on how to do this for Safari/Chrome: http://css-tricks.com/custom-scrollbars-in-webkit/ Internet Explorer users don't deserve good design anyway, right? :P
Here you go , this script degrades nicely in most browsers.
JqueryScrollpane
As pointed out in the title, my question is very simple: is there any way that I can achieve clicking on a header (title) and expand (and collapse) a text associated with it, without using JavaScript nor jQuery? Is there any browser compatible way of doing this (IE 6+ proof)?
I've made a very simple HTML+CSS site for a conference, and I would like to use JS only if necessary. So, I'm just asking if I can do it sticking only to HMTL/CSS, in a compatible way, of course.
The few solutions I've found are old or incompatible with some browser versions.
IE6-proof pure CSS solution?
NO
[Leave the dead rest in their graves, don't try to make them run a marathon. That's what you're doing when you're asking for IE6 to do things like this.]
IE7/8?
Yes, there is one solution (the principle is the same one used in this older demo of mine), but it is not persistent (meaning that if you click anywhere else on the page, your expanded content will collapse) and it behaves a bit weird in IE7 (meaning that you have to hover off the clicked element after you click it in order to see your content expanding).
IE9+ and the other browsers?
YES! Also persistent. Same principle as the one I used here.
JavaScript/ jQuery method?
Yes! See this: a jQuery version of the same demo.
You can do simple Hover dropdown menus with just HTML & CSS which are supported cross browser:
http://jsfiddle.net/fkS2z/
You can improve on this with fades or slidedowns with CSS transitions which are not supported in lower version of IE:
http://jsfiddle.net/N9fDy/1/
Not so much with clicking though.
I want to create a sliding effect as seen in http://demos.flesler.com/jquery/scrollTo/ but with plain html and css. is that possible? if so, how?
If it is html5 and css3, no problem (I won't use IE (-: )
thanks in advance!
See this demo:
http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
And the explanation here:
http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
It shows how to set up a CSS3 scrollTo transition, however, only works with the link anchors - not the scrollbar - which is a deal-breaker for me.
I think you can use the psuedo :target to achieve this, quick Google search fetched this example - it gives a detailed write up on how it works on this page. I'm sure Google will bring up other results and more examples to get it working how you want it :)
Of course only certain new browsers will understand :target but if this doesn't bother you then you have nothing to worry about.
Is it possible to style the option elements of a select list/dropdown beyond background and font? I'm specifically looking to add some padding/margins so the list isn't as cramped.
Not possible if you want broad browser support. At least IE doesn't support it. There's then no other option than to mimic and progressively enhance the dropdown with <ul><li> and a good shot of JavaScript. You can get here some ideas what's possible with JS (jQuery actually) based dropdowns.
#Alex: we were in the same predicament as you seem to be. We too wanted to control the UI of the dropdown. Unfortunately as others have already mentioned, you have no option with the system dropdown if you want to have cross-browser compatibility also.
so we came up with our own jQuery plugin which works like a system dropdown for most features. It also supports themeing as well as flexibility to provide customized list items by way of templates. You can see the running code samples from the following URLs listed and learn more about it. We are sure you will find it useful.
Sample and documentation - india.assigninfo.com/assignlabs/jaldropdown
Cascading dropdown sample code from coderun.com - coderun.com/ide/?w=GEXVey_kckKrAkLeoIfZNg
Sample code to configure jaldropdown from within scrollable DIVs - coderun.com/ide/?w=BiE5TbXdIEehDOxNk1oajw
It is possible however the functionality is not available in Internet Explorer
I'm using a very simple CSS dropdown menu which works well in most modern browsers. Unfortunately it must also work in IE6 and 7, which it currently does not. Can anyone please check it out very quickly and tell me if it can be easily fixed?
I'm not adverse to using JavaScript if required.
The markup and CSS: http://paste2.org/p/826583
The :hover pseudo selector doesn't work in IE6 or IE7 (quirks mode) for non-links (your li's for instance). That's why the original popular CSS dropdown included a bit of JavaScript.
If you're still having issues with spacing and such, I would check out the Son of Suckerfish Dropdowns. IMO the gold standard of CSS dropdowns.
Rather than trying to debug your CSS, I think you should just start with a menu that is confirmed to work in IE6 and 7. There are many, and if you start with that criteria, you'll save a lot of time.
I use jQuery and droppy. Extremely simple and works on everything. Once you find one that works, keep using it so you avoid all this waste on any future projects.