Currently I am using <span>Home<span> on hover of an anchor element within a li. However, I need a drop-down on hover. Something like the same home span but two or three more items underneath it. Any help would be appreciated. Click for jsFiddle
!
It would be easier if you use <ul> and <li> rather than using <span>. Like what Parallel 2ne said it depends on your html markup. However you could also force it via Javascript/jQuery by creating a function that triggers automatically when you hover the <span> elements individually. When it triggers it applies display:block or display:hidden for the sub <span> elements.
you can do it on css and html, without any js file.
The HTML Code you need :
<ul>
<li>
<span>Menu 1</span>
<div class="sub-menu">
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
</div>
</li>
<li>
<span>Menu 2</span>
</li>
and here is the CSS you must attach :
li .sub-menu {
visibility:hidden;
opacity:0;
/*and more custom CSS as you need*/
}
li:hover .sub-menu {
visibility:visible;
opacity:1;
}
You can use transition to animate your effects .
You should take a look at using icon fonts instead of pictures, makes the whole site much smaller if you are using many images like this and is much more efficient, making a jsfiddle for you now.
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
first question here so please go easy on me :).
I started studying css3 two weeks ago, and now i'm trying to build a pure css3 dropdown menu system.
I got my menu built like this
<body>
<div id="column">
<div id="header">
<heading1>Header.</heading1>
</div>
<div id="menu">
<menu-element class="chosen"> Home page</menu-element>
<menu-element>Project</menu-element>
<a href="Gallery.html">
<menu-element> Gallery
<ul>
<li>1</li>
<li>2</li>
</ul>
</menu-element>
</a>
</div>
....
</body>
I'm working by integrating the css code i studied on a tutorial to work on my css structure.
The step i'm having problem is is the first: hiding the submenu items when not on mouseover.
I tried with
menu-element ul
{
display: none;
}
to hide only ul elements nested in menu-element elements, but it didn't work.. and the ul and its li childs are still there. Could anyone help me out by telling me where i'm wrong?
Your only problem is that you have invalid html tags, (<menu-element> and <heading1>).
Instead of <menu-element> use <nav>, and instead of <heading1> use <h1>.
I think that you are doing your tests in IE, and in some of the old compatibility modes.
In Chrome, Firefox, and IE 11, your code works
fiddle
code fragment to make SO happy:
menu-element ul
{
display: none;
}
It is true that your elements are not valid HTML types, (and of course you should use valid ones!!) but HTML5 compliant browser are quite liberal about that.
Best practice in creating navigation menus is to use an unordered list for the entire menu. This way if styles are not loaded (for whatever reason) it still reads properly. As other have mentioned, and are not valid tags.
I would suggest using the model below:
<nav>
<ul>
<li>Home</li>
<li>Project</li>
<li>
Gallery
<ul class="gallery">
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</nav>
And for the css you could use
ul.gallery{
display: none;
}
or
nav ul li ul{
display: none;
}
I use the second option when creating pure css dropdown menus as it is easier to follow along as you create more complicated menus. It also allows you to hide all submenus rather than just the one with the class of gallery.
What CSS makes <a> tags show on a single line, rather than under each other?
Maybe have a link in <li> tag?
I believe you want:
a {
display: block;
}
edit
Anchors by default show inline, but the related CSS is:
a {
display: inline;
}
You could also use inline-block which gives you a bit more functionality (although some older browsers support it poorly).
If you want a link in a <li> tag:
<ul>
<li>
Link here.
</li>
</ul>
CSS:
li {
display:inline-block;
}
Example here
I created an example for you which answers your second question.
<p id="top">This is the top of the file</p>
<ul> Favourite sports
<li>Football</li>
<li>Tennis</li>
<li>Rugby</li>
</ul>
<p>This link goes to the top</p>
The tag li refers to list item. Links are written the same way in ordered and unordered lists.
Guys can anyone tell me why I can't remove the list-style-type from the <ul> below using the specificity defined below the html.
<footer><!-- this is where the footer starts-->
<div class="container_12">
<div class="grid_2">
<ul>
<li>
<strong>
test
</strong>
</li>
<li>
Home
</li>
<li>
Why
</li>
<li>
Get Started
</li>
<li>
Customers
</li>
<li>
Careers
</li>
</ul>
footer ul {
list-style-type:none;
margin:0px;
padding: 0px;
}
I've also tried footer div div ul {} but I can't seem to address the ul element.
Css class needs to be called .footer ul {...}, and footer has to actually use it: <footer class="footer"> - because in IE6, and any other browser that doesn't understand HTML5 tags, <footer> is renamed to <div> by whichever solution you are using, so the css selector would not apply any longer...
UPDATE: check in any browser developer tools if anything is overriding your style, or try forcing it with list-style-type: none !important;
Your example definitely references the Unordered List without issue, both examples in fact. Perhaps you have other conflicting styles which are giving you the issue?
To see it working click here. Please notice that I have put a red border around it to help make it clearer.
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!