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.
Related
I'm working on a project(using bootstrap) and I can't seem to figure out why my nav is still stacked up instead of being laid out horizontally. I've tried just about everything I can think of and even sought help online where I'm learning to code but they couldn't figure it out either. They told me it should be working and in fact it does work in their code editor, it just doesn't work on my computer which is where the files are located since I don't have web hosting and I'm just learning. I also noticed that in my browser the nav pull-right works and the links are on the right hand side(although they're still not horizontal) but when I ran it through here where it says "run code snippet" the nav appears right underneath the img placeholder, don't know if that means anything but I thought I'd include that bit of information.
header nav ul{
display: inline-block;
}
<header>
<div class="container">
<div class="row">
<img id="logo" src="http://placehold.it/150x150">
<nav>
<ul class="nav pull-right">
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
enter image description here
Do you mean you want to make the navigation to align horizontally?
Then you can try using this
header nav ul li {
display: inline-block;
}
working example here.
The reason your method doesn't work is because you apply to ul instead of the li element.
I'm trying to make my website with Wordpress.
I wanted to add my custom horizontal menu, with plain CSS and HTML since plugins can't satisfy me.
This is my HTML code:
<div id="provamenutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
and this is my CSS:
#provamenutop {background-color:#333; width:90%; line-height:100%;}
#provamenutop li {position: relative; float:left; list-style: none; font-family:verdana;}
#provamenutop li a {display:inline-block; text-decoration:none; padding: 20px; color: white; background: #333; transition:.4s;}
#provamenutop li a:hover {background: #111;}
On my local computer, this looks right:
https://gyazo.com/d5b38f6cc1c7857dbe37945e2d8b5002
But here's what it looks like on my website, using a custom theme called Sportexx:
https://gyazo.com/5ccb7e944b627244a7d3ac8344471b28
I know this could be some CSS already existing in the theme interfering with mine, but what could I do to avoid the problem? (The space in between one Home button and the other is also clickable)
Thank you for reading.
When you use Chrome Developer Tools or Firefox Firebug and inspect the HTML, you will see the following output for your menu on the web site http://www.ferrari.co.it/athletic/
<div id="provamenutop">
<ul>
<li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a><li>Home</li><a href="#">
</a></ul><a href="#">
</a>
</div>
So the problem here is not CSS, but faulty HTML. You have two additional <a href...></a> tags. One before the Home and one outside the closing </li> tag and also one outside the closing </ul> tag.
If you fix your HTML, so that it looks like this, it will actually work:
<div id="provamenutop">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
It's definitely a CSS conflicting issue. Do you have a link so we can check it in firebug? Should be a very easy fix. When I run your html and css in JSFiddle it works fine.
I'm not sure what you mean by On my local computer, this looks right:
But here's what it looks like on my website, using a custom theme
called Sportexx:
Are you not using sportexx on your local computer? If it's working without the theme and not working with the theme it's the CSS. Just open up firebug in your browser and look at the css around the menu. You should be able to adjust it right there and remove the problem. Then go to your stylesheet and make the changes accordingly.
After seeing your comment. It's the html. Just delete the other links.
I'm trying to make my current CSS navigation responsive for mobile devices.
I currently have it set up with a media query so that when the screen width falls below the specified size it changes to block form (stacked) and a menu icon appears on the right hand side of the logo (to later be made into a button).
The problem I'm currently having is that the drop down menu which is used for my second link in the navigation, is causing a gap to appear between the second and third link (as if the drop down content is taking up the space whilst hidden).
I've tried looking for solutions but can't seem to find the right answer for my particular setup. Basically, the link "How It Works" should sit right beneath "Sections" when on mobile.
http://jsfiddle.net/fc45c7p5/
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:330px;height:100px"/>
</a>
<div id="menu-icon"></div>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME</li>
<li>SECTIONS
<ul>
<li>RETAIL</li>
<li>HOTEL</li>
<li>RESTAURANT</li>
<li>SHOPPING</li>
</ul>
<li>HOW IT WORKS</li>
<li>OUR EXPERIENCE</li>
<li>TESTIMONIALS</li>
<li>NEWS</li>
<li>CONTACT US</li>
</ul>
</div>
Don't take too much note of the media query max-width of 1008px, I'm aware this isn't standard mobile size, it's just temporary whilst I get it working first.
Any help regarding this is really appreciated.
visibility keeps your elements there without displaying them. You should use display:none when you do not want show the space the hidden element takes. Use display:block to show them again. Add some CSS transitions to the height of the a elements to make the reveal somewhat smoother.
Here : http://jsfiddle.net/6eshy7n2/
Add the following.
ul.navbar ul li { float: none; width: 100%; display:none;}
ul.navbar li:hover > ul li{display: block;}
You have to make the lis inside the uls actually not display when the parent li is not being hovered. When it is hovered you then change the display value to block to make it visible.
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.
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!