Can anybody give a reference or is it possible to create a menu entirely depending on
CSS and not a single bit of javascript?
The Requirement is a dropdown menu, which can have many children ( submenu ).
Will anything if created like this will be cross browser compatible?
Any help on this topic will be appreciated!.
EDIT
Thanks for all your inputs one more doubt
Can this be implemented rather than using ul li
say div span combination as that may help me achieving a menu which won't change my current html structure!
The trick is the :hover pseudo-class.
<ul class="menu">
<li>
Menu Item 1
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li>
Menu Item 2
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
Ok? So your entire submenu has to go inside the <li> of the main menu item it corresponds to. Then for the CSS:
.submenu { display: none; }
.menu>li:hover>.submenu { display: block; }
Do a bit of styling, and job done.
Edit: For another layer of menus, it's really simple. Use this CSS:
.menu li>ul { display: none; }
.menu li:hover>ul { display: block; }
Note that I've replaced .menu>li:hover with .menu li:hover. That tells the browser to find all li elements below the main menu (not just immediate descendants) and show their submenu when hovering. I've also got rid of using the submenu class because it's not really needed if you're basing the CSS on descendants. This will let you add as many levels as you want.
Check this site : http://www.cssplay.co.uk/menus/ which have a lot of different menus with CSS only. A reference.
Check this out: http://www.cssplay.co.uk/menus/final_drop.html
See if this helps http://www.howtocreate.co.uk/tutorials/testMenu.html
http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129
It is certainly possible to do drop-down menus in CSS only, and many sites are now using it.
What you won't get (yet) with CSS are any animated roll-outs, etc - the menu will just toggle between visible and hidden. If you want animated roll-outs, jQuery may be a better option. That said, CSS animation does exist. It is only implemented in one or two browsers, but you could add it to your stylesheet anyway; it won't break browsers that don't support it; they just won't get the animation.
Cross-browser compatibility for CSS menus is relatively easy, as long as you ignore IE6. IE7/8 can be made to work without too much fuss, but IE6 is badly broken for virtually all CSS-only menu techniques. If at all possible, try to avoid having to support IE6. Its an old browser, and really needs to be left to die in peace.
Others have already provided links to some good examples, so I won't repeat them here.
I have just finished developing a CSS Menu for mobile devices, using absolutely ZERO Javascript. Basically, by applying the tabindex="-1" attribute to anything you want, you allow that element to react to the :focus CSS property without actually being part of the tab order (so you can't reach that element by tabbing through). Applying this to the currently accepted solution:
<ul class="menu">
<li tabindex="-1">
Menu Item 1
<ul class="submenu">
<li>Submenu 1</li>
<li>Submenu 2</li>
</ul>
</li>
<li tabindex="-1">
Menu Item 2
<ul class="submenu">
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
I removed the <a> tags (because now our drop-menus are CLICKABLE, we insert the tabindex on whatever we want to click on and the CSS gets changed to this:
.menu > li:not(:focus) > .submenu { display: none; }
Check out this Codepen for my Mobile Menu:
NO javascript
Responsive
Stylable
HTML Hamburger menu symbol!
Related
I am trying to create this layout in CSS3
The image on top-left should collapse the vertical menu and show only the images. This should be animated, so it smoothly collapses. I want to do a CSS only solution, no JS/JQuery, no Bootstrap if at all possible. When collapses, the green and yellow boxes should move left as well. Both blue and green boxes should be fixed and the yellow one scrollable.
This has some potential features I want. This is not exactly what I want, and it does not work in my browser.
I am not sure how I can make, with CSS only, the top-left image link to resize the vertical menu, hide only the text of the links (which is not under a span, since I dislike to use it for presentation only), and change its own image. Of course, by clicking again on the new top-right image it should "de-collapse".
One problem I have is that I used padding for the green and yellow boxes as this Website does, and this seems incorrect to me. They should automatically be readapted to the new layout, without having to toggle the padding.
I have created a JSfiddle.
<body>
<header>
<nav>
<a href="#">
<img src="logo.png" alt="logo">
</a>
<ul>
<li><img src="option1.jpg">Option 1</li>
<li><img src="option2.jpg">Option 2</li>
<li><img src="option3.jpg">Option 3</li>
</ul>
</nav>
</header>
<main>
<nav>
<ul>
<li>LINK</li>
<li>LINK</li>
<li>LINK</li>
</ul>
</nav>
<h1>Main title</h1>
TEXT TEXT TEXT
</main>
</body>
Any help is appreciated.
EDIT:
Browser support - I would like to address mainly modern browsers, so I will not care much about old IE tricks.
It seems that it is not possible to do it with only CSS (I kind of felt that from my old CSS experience, but was not sure if recent improvements had gone so far to allow it). If JS/JQuery is required, I guess the solution is to capture the click on the image and change the DOM. Not sure how the animation can be done though. And what about the basic layout? Is there a way to keep green&yellow on the left side, close to the blue box, without padding them differently depending on collapse?
The most common way to achieve a toggle without JS is using the checkbox hack. Here is a simple example to get you started (clicking menu will toggle the list style):
.main_nav__checkbox {
position: absolute;
top: -1000em;
}
.main_nav__checkbox:checked ~ ul {
background: red;
}
<nav>
<input type="checkbox" name="togglenav" id="togglenav" class="main_nav__checkbox" aria-label="Toggle Menu" />
<label class="main_nav__toggle" for="togglenav">Menu</label>
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</nav>
Note that there are reasons that this isn't used often:
It is 'hacky'
It relies on the :checked attribute ( IE9+ )
It relies on the label checking the checkbox ( a firefox bug made this difficult in the past)
ya, as mentioned in above answer i've edited your fiddle made it work with that 'hacky' checkbox :checked css selector. but i'm unable to animate it though
try modifying the fiddle or i'll update the answer if i can get the animation to work!!!
FIDDLE
I am trying to produce a Navbar similar to the one on this page :
http://wrapbootstrap.com/preview/WB0375140
I am using Bootstrap 3 and can create the top corner rounded boxes with slight gradient at bottom easy enough.
The thing I am struggling with is that the menu items in the navbar on that example are all the same width regardless of how wide the text in them is.
I am scratching my head trying to find out how that is done - And ideas much appreciated.
You have to add css width property to all elements in the navbar.
Assuming your navbar is something like this:
<div id="myCustomNavbar">
<ul>
<li class="active">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
You should add some style with CSS:
#myCustomNavbar > ul > li
{
width: 100px !important;
}
Remember you can always right-click the element you are interested in (in the sample webpage), and click Inspect element. There you can see all html markup and CSS styles applicated to that element
I have this list
<nav>
<ul>
<li>list el</li>
<li>list el</li>
<li>list el
<ul>
<li>inside</li>
<li>inside2</li>
</ul>
</li>
</ul>
</nav>
<section>
<img src="#">
<h1>Some Title</h1>
</section
And I am using :focus to display the dropdown list on click, without using JS. Everything is ok for now. But I would like to,change the color of the entire section when the dropdown list is active (through :focus).
Is there any way I could do that entirely with css? I am trying to use as little JS as possible (definetly no jQuery)
Yes you can, without the slightest bit of JS, using the Radio Hack. Basically, use a label as your "focused" element. This label should have its for attribute refer to an input type="radio" that is hierarchically above the elements that you want affected. Then just use the following css selector #myradio:checked ~ #mysection{ }.
More details here: https://stackoverflow.com/a/21939282/2306481
If you are open to changing from using :focus to using :target then yes you can.
It is not clear from your question how you are implementing your drop-down behaviour, but this is a simple example, that should explain how you can approach it. (only the third item has a drop down, but all three links should change the background colour).
The behaviour of :target is a little different to :focus however, so things that you need to be aware of are:
target will change the URL, creating a history point.
target will retain the "focus" even if the user clicks on a different element, the only time a target is lost is when another target is targeted.
li ul {display: none;}
#dd1:target { background: gold; }
#dd2:target { background: green; }
#dd3:target { background: red; }
#dd3:target .dd3 {display: block;}
<div id="dd1">
<div id="dd2">
<div id="dd3">
<nav>
<ul>
<li>list el</li>
<li>list el</li>
<li>list el
<ul class="dd3">
<li>inside</li>
<li>inside2</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
I'm designing a navigation bar as shown in image below (a) with the following code:
<ul>
<li class="unselected">Step 1</li>
<li class="selected">Step 2</li>
<li class="unselected">Step 3</li>
<li class="unselected">Step 4</li>
<li class="unselected">Step 5</li>
</ul>
I want to have one background image for unselected steps (d) and one for the selected step (c). For simplicity let's assume Step 1 and Step 5 use the same background as well.
I want to adjust the button background in HTML only with a class name.
The question is how can I achieve the result with CSS? I just want to know how background of two neighbor elements can overlap each other?
Edit: the steps are links. the background is a transparent PNG file preferably only containing the blue or gray shape and its border.
Answer: http://jsfiddle.net/morrison/99LhB/
Notes:
Click-boxes will be messed up on diagonals. I just realized that this will always be the case. I'd decrease the width of the arrow if I were you to help avoid this issue. I would also add a hover state which would help clarify which one you are hovering on. If they aren't hyperlinks, this doesn't matter: feel free to remove those css rules.
HTML simplicity makes for CSS complexity in this case. There are less classes to worry about, but now we rely on CSS selectors. I would personally choose this way over the other, but that's a personal choice.
There's only one image. Uses a CSS sprite to accomplish this. It also speeds up the webpage a little.
Shows how it looks for all 5 steps.
You can do this. what you want to do is use a negative margin.
.someclass {
margin-left: -5px;
}
That should overlap the each of the elements (if applied to all li objects).
They can't overlap only the background, but html element might be stacked. However I'd recommend such a solution only if you have no other.
In your visual example, I guess that must be something like that :
Html :
<ul>
<li class="before_selected">Step 1</li>
<li class="selected">Step 2</li>
<li class="after_selected">Step 3</li>
<li class="unselected">Step 4</li>
<li class="unselected">Step 5</li>
</ul>
CSS :
.unselected {
background-image: url('all_grey.jpg');
}
.before_selected {
background-image: url('left_grey_right_blue.jpg');
}
.after_selected {
background-image: url('left_blue_right_grey.jpg');
}
.selected {
background-image: url('all_blue.jpg');
}
How could I have the tab to be on hover mode while I rollover the drop down sub-menu.
Does it require javascript or it could be done solely on CSS?
<li id="anchor" class="title dropdown">Main Tab
<div class="column">
<ul>
<li class="subtitle">Button 1</li>
<li class="subtitle">Button 2</li>
<li class="subtitle">Button 3</li>
</div>
</li>
As matpol suggested, you can use css to do it, and use the css hover fix to sort it in IE.
As a side note, you don't need that div in there, everything you need to do style wise can be done by styling the nested li element (you also need to close the second ul too). I'm guessing its just a quickly done code snippet anyway, but I thought I'd bring it up :)
Update;
Tbh howver mega the dropdown is, you shouldn't need divs in that level (you can put them in the <li>'s if you need to).
Something like this...
<li id="anchor" class="title dropdown">Main Tab
<ul class="column">
<li class="subtitle">Button 1</li>
<li class="subtitle">Button 2</li>
<li class="subtitle">Button 3</li>
</ul>
</li>
/* styles */
li#anchor:hover {
/* Styles for tab hover state, will be in effect when you're hovering over any child ul/li elements */
}
li#anchor ul.column {
display: none;
/* Styles for this ul, float, position etc */
}
li#anchor:hover ul.column {
display: block;
}
Its untested, but I've done more of these than I'd care to remember :P
you can do it with CSS but need JS for older crappier browsers(ie6) e.g.
li .column{
display: none;
}
li:hover .column{
display: block
}
IE6 only supports hover on anchor tags hence the need for JS.