I got a css3 menu with this code:
HTML:
<div id="navi">
<ul>
<li>First</li>
<li class="active">Second
<ul class="child">
<li>First child</li>
</ul>
</li>
<li>Third</li>
</ul>
</div>
CSS:
#navi {
height: auto;
width: auto;
}
#navi ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navi ul li {
float: left;
position: relative;
}
#navi ul li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#navi ul li a:hover {
background-color: #0C3;
}
#navi ul li ul {
position: absolute;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
height: 0px;
overflow:hidden;
}
#navi ul li:hover ul {
height: 100px;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
}
Fiddle Here
Now I want that the menu isn't horizontal. It should be vertical. I tried to remove float:left; but then the submenu doesn't display. The submenu should press all menu items below down. Any suggestions? Would be great.
If you do this, it will give it perfect look and push your nav three item down. Add this height to your particular class:
#navi ul li:hover ul {
height:32px;
}
But if you have other sub menu items in other main nav items with different items in them, then you should make classes for all particular elements and give them height according to them. Have a look at this:
#navi ul li:hover .class {
height:64px; /*for two items in sub menu and like this for other*/
}
<!DOCTYPE html>
<html>
<head>
<style>
#navi {
height: auto;
width: auto;
}
#navi ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navi ul li {
}
#navi ul li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#navi ul li a:hover {
background-color: #0C3;
}
#navi ul li ul {
position: relative;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
height: 0px;
overflow:hidden;
}
#navi ul li:hover ul {
height: 100px;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>First</li>
<li class="active">Second
<ul class="child">
<li>First child</li>
</ul>
</li>
<li>Third</li>
</ul>
</div>
</body>
</html>
Check this
your css:
#navi {
height: auto;
width: auto;
}
#navi ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navi ul li {
position: relative;
}
#navi ul li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#navi ul li a:hover {
background-color: #0C3;
}
#navi ul li ul {
position:absolute;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
height: 0px;
overflow:hidden;
}
#navi ul li:hover ul {
position:absolute;
left: 100px;
top: 0px;
height:50px;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
}
your html:
<div id="navi">
<ul>
<li>First</li>
<li class="active">Second
<ul class="child">
<li>First child</li>
</ul>
</li>
<li>Third</li>
</ul>
</div>
copy and paste this coding. its worked. i think you want like this vertical menu bar???
Related
I was expecting this from Internet Explorer, but my beloved Firefox let me down on this one.
This fiddle will not work (at least for me it did not) on Firefox and I would like to know why. I have seen a lot of documentation and I guess this should be working.
Here is the fiddle: http://jsfiddle.net/6UFX7/11300/
HTML:
<div id="nav">
<ul>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
</ul>
</div>
CSS:
#nav
{
height:60px;
background-color:#FFFFFF;
overflow:hidden;
}
#nav ul
{
color: #f2f2f2;
margin-top:20px;
list-style-type: none;
text-align: center;
float:left;
}
#nav ul li
{
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 10px;
}
#nav ul li a
{
color: #8198A0;
font-style: normal;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
#nav ul li a:after
{
margin-top:16px;
content: "";
display: block;
height: 5px;
width: 0;
-webkit-transition: width 0.5s ease, background-color 0.5s ease;
-moz-transition: width 0.5s ease, background-color 0.5s ease;
-o-transition: width 0.5s ease, background-color 0.5s ease;
transition: width 0.5s ease, background-color 0.5s ease;
pointer-events:none;
}
#nav ul li a:hover:after
{
width: 100%;
background-color:#8198A0;
}
#nav ul li a:hover
{
cursor: pointer;
}
One more quick question about "pointer-events:none":
It is working fine on Internet Explorer but not on Chrome (I could not test it on Firefox because the above problem).
Thanks in advance!
This appears to be because the #nav ul li a elements are the default display: inline. Adding display: inline-block; to these elements fixes the issue.
Working Example:
#nav
{
height:60px;
background-color:#FFFFFF;
overflow:hidden;
}
#nav ul
{
color: #f2f2f2;
margin-top:20px;
list-style-type: none;
text-align: center;
float:left;
}
#nav ul li
{
display: inline-block;
*display: inline;
zoom: 1;
margin: 0 10px;
}
#nav ul li a
{
color: #8198A0;
font-style: normal;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.25px;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-o-transition: color 0.5s ease;
transition: color 0.5s ease;
}
#nav ul li a:after
{
margin-top:16px;
content: "";
display: block;
height: 5px;
width: 0;
-webkit-transition: width 0.5s ease, background-color 0.5s ease;
-moz-transition: width 0.5s ease, background-color 0.5s ease;
-o-transition: width 0.5s ease, background-color 0.5s ease;
transition: width 0.5s ease, background-color 0.5s ease;
pointer-events:none;
}
#nav ul li a:hover:after
{
width: 100%;
background-color:#8198A0;
}
#nav ul li a:hover
{
cursor: pointer;
}
<div id="nav">
<ul>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
<li><a>ENTRY</a></li>
</ul>
</div>
As for the pointer-events issue, if this does not solve that issue as-well, you should probably ask a question specifically about that.
i'm fairly new to html and I need to create a basic website for my college assignment but I want to go a step up from what everyone is doing and rather then creating a basic navigation menu I decided to create something more interesting and fun, a drop down navigation menu with changing colors and transition effects (HERE IS THE ISSUE) - BUT when i hover over menu the lists do not appear.. here is my html/css codes for that section:
<ul id="navmenu">
<li>Menu</li>
<ul>
<li>Education</li>
<li>Hobbies</li>
<li>Interests</li>
</ul>
</ul>
ul
{
list-style-type: none;
}
#navmenu a {
text-decleration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: ;
border: 1px solid #CCC;
border-radius: 5px;
font-family: Magneto;
font-size: 20px;
color: ffffff;
transition: ease-in all 400ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
}
#navmenu ul {
display: none;
}
#navmenu li:hover ul {
display: block;
}
#navmenu li:hover > a {
background-color: #535ffb;
transition: ease-in all 300ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
position: relative;
left: 10px;
}
#navmenu a {
margin-top: 3px;
}
Probably because your second ul is not nested under the menu item. Try this:
ul {
list-style-type: none;
}
#navmenu a {
text-decleration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
background-color: ;
border: 1px solid #CCC;
border-radius: 5px;
font-family: Magneto;
font-size: 20px;
color: ffffff;
transition: ease-in all 400ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
}
#navmenu ul {
display: none;
}
#navmenu li:hover ul {
display: block;
}
#navmenu li:hover > a {
background-color: #535ffb;
transition: ease-in all 300ms;
-moz-transition: ease-in all 300ms;
-webkit-transition: ease-in all 300ms;
-o-transition: ease-in all 300ms;
position: relative;
left: 10px;
}
#navmenu a {
margin-top: 3px;
}
<ul id="navmenu">
<li>
Menu
<ul>
<li>Education
</li>
<li>Hobbies
</li>
<li>Interests
</li>
</ul>
</li>
</ul>
I have an issue with hrefs linking away from my site.
Certain links (the ones linking out of the page) in my header refuse to work no matter what, but the links in the header that link to internal divs work just fine.
Also, when I right click the link and select Open from the dropdown menu, it works as intended.
Link to site:
http://66.*.*.89
It's the twitter and youtube button in the upper left in the header.
Code for the CSS:
#header {
font-family:arneper;
color:white;
width:100%;
height: 100px;
position:fixed;
top:0;
left:0;
right:0;
background:rgba(0,0,0,0.7);
}
#header #headermenu {
width:97%;
padding: 0;
float:left;
margin:0 25px;
}
#header #headermenu li {
list-style: none;
}
#header #headermenu li a {
color:#888;
float:right;
text-align:center;
font-size:12px;
margin:8px;
width:50px;
padding: 8px 0px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-t-border-radius: 3px;
-o-transition: 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}
#header #headermenu li a:hover {
color:#FFF;
-o-transition: 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}
#header #title {
font: bold 310%/100% Didot, Arial, sans-serif;
font-size:30px;
font-weight: lighter;
margin: 25px 40px 0px 35px;
color: #fff;
text-transform: uppercase;
letter-spacing: -2px;
-o-transition: 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}
#header #title :hover{
color: #888;
-o-transition: 0.3s linear 0s, color 0.3s linear 0s;
-moz-transition: 0.3s linear 0s, color 0.3s linear 0s;
-webkit-transition: 0.3s linear 0s, color 0.3s linear 0s;
}
Header HTML:
<div id="header">
<div id="title">Home</div>
<ul id="headermenu">
<li style="float:left">Twitter</li>
<li style="float:left">YouTube</li>
<li>Top</li>
<li>About</li>
<li>Code</li>
<li>Portfolio</li>
</ul>
</div>
EDIT: I just realised that the buttons in the footer has the same issue..
You have this jQuery code in your header
$('a').click(function(e){
e.preventDefault();
var target= $(this).attr("href");
$target=$(target);
$('html,body').animate({scrollTop:$target.offset().top},1200,'swing');
});
It targets all links, not just the internal ones. Since you're calling e.preventDefault() those links aren't going to go anywhere.
You can attach another class to your internal links and narrow down your jQuery selector, or in your handler you can check the href attribute of the link to see if it starts with a #.
You could also use jQuery's starts-with attribute selector.
$("a[href^='#']").click(function(e) {
(You'll need to update your links to use # and not .)
I tried to make a menu, which has 3 menu items and 1 subitem. If I click on second item, first child item should display. But not normally display it. It should animate it and slide it. I think there is a way with transition but I don't really know CSS3. And I want to have a pure css solution.
Here my HTML code:
<div id="menu">
<ul>
<li>First</li>
<li class="active">Second
<ul class="child">
<li>First child</li>
</ul>
</li>
<li>Third</li>
</ul>
</div>
I created this fiddle. Now I want to show First child menu item slowly if I click on Second menu item.
The only thing that I did before was checking transition but I just don't get it.
Can someone give me a hint?
Cheers
See your jsfiddle updated http://jsfiddle.net/3kEg4/3/
#menu {
height: auto;
width: auto;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menu ul li {
float: left;
position: relative;
}
#menu ul li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#menu ul li a:hover {
background-color: #0C3;
}
#menu ul li ul {
position: absolute;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
height: 0px;
overflow:hidden;
}
#menu ul li:hover ul {
height: 100px;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
}
(inspired from http://jsfiddle.net/ashukasama/2BqGY/)
You can use some CSS3 animations to achieve this effect.
#menu ul li ul{
opacity:0;
-webkit-transition: .6s ease;
-moz-transition: .6s ease;
-ms-transition: .6s ease;
-o-transition: .6s ease;
height: 0;
}
#menu ul li:hover ul {
opacity: 1;
height: 100px;
}
JSFIDDLE
radio active states
JSFIDDLE Radio
Stackoverflow Q
jQuery
$('.subMenu').on('click', function() {
$('.subMenu ul').slideToggle(1000);
});
JSFIDDLE jQuery
i think this is better
#menu ul li ul{
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
position: absolute;
}
#menu ul li:hover ul {
visibility: visible;
opacity: 1;
position: relative;
}
Works great as well. Please do add prefixes. Hope this helps someone.
i want to fix this fiddle u can see its not working well.
i want to make this nav horizontally and submenu vertically and submenus of submenu horizontally but problem is that i also used transitions on this but its not working correct.
the first submenu dont drop smoothly but rollout smoothly and 3rd menu dont work like smooth rolling and rolling out.
i want to fix this out and i want help how to figure this out.
here is the fiddle,
all codes included this.
http://jsfiddle.net/hsn0/nQneb/
css
#nav {
height: auto;
width: auto;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#nav ul li a:hover {
background-color: #0C3;
}
#nav ul li ul {
position: absolute;
visibility: hidden;
-webkit-transition: all 1s linear 0s;
-moz-transition: all 1s linear 0s;
-ms-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
transition: all 1s linear 0s;
overflow: hidden;
height: 0px;
}
#nav ul li:hover ul {
height: 100px;
visibility: visible;
overflow: visible;
}
#nav ul li ul li {
-ms-transition: all 1s;
-o-transition: all 1s;
}
#nav ul li ul li a {
background-color: #666;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#nav ul li ul li a:hover {
background-color: #C30;
}
#nav ul li ul li ul {
position: absolute;
left: 102px;
top: 0px;
display: none;
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
transition: all 1s ease 0s;
overflow: hidden;
visibility: hidden;
width: 0px;
}
#nav ul li ul li ul li {
float: left;
position: relative;
}
#nav ul li ul li:hover ul {
width: 104px;
display: block;
/* [disabled]overflow: visible; */
visibility: visible;
}
**html**
<nav id="nav">
<ul>
<li>Item1
<ul>
<li>Sub1</li>
<li>Sub1</li>
<li>Sub1
<ul>
<li>Sub2</li>
<li>Sub2</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
please checkout this demo
I feel major problem is due to visibility and overflow, We can transition opacity and height though.
I used few menu part for this... I tried with height, although it will work with all also.
#nav ul li ul {
position: absolute;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
height: 0px;
overflow:hidden;
}
#nav ul li:hover ul {
height: 100px;
-webkit-transition: height 1s linear 0s;
-moz-transition: height 1s linear 0s;
-ms-transition: height 1s linear 0s;
-o-transition: height 1s linear 0s;
transition: height 1s linear 0s;
}
i hope, below css will solve ur problem
#nav {
height: auto;
width: auto;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#nav ul li {
float: left;
position: relative;
}
#nav ul li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
/*transition: all 0.3s ease-out;*/
transition:display 0s linear 0.5s,opacity 0.5s linear;
}
#nav ul li a:hover {
background-color: #0C3;
}
#nav ul li ul {
position: absolute;
height:0;
visibility:hidden;
opacity:0;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
}
#nav ul li:hover ul {
opacity:1;
visibility:visible;
overflow: visible;
}
#nav ul li ul li a {
background-color: #666;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
#nav ul li ul li a:hover {
background-color: #C30;
}
#nav ul li ul li ul {
position: absolute;
left: 102px;
top: 0px;
visibility:hidden !important;
opacity:0 !important;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
transition: all 1s ease-out;
overflow: hidden;
}
#nav ul li ul li:hover .last {
opacity:1 !important;
visibility:visible !important;
overflow: visible;
}
#nav ul li ul li .last li{
float: left;
position: relative;
}
#navul li ul li .last li a {
line-height: 30px;
text-decoration: none;
text-align: center;
display: block;
width: 100px;
height: 30px;
border: thin solid #999;
color: #FFF;
background-color: #0CF;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
HTML
<nav id="nav">
<ul>
<li>Item1
<ul>
<li>Sub1</li>
<li>Sub1</li>
<li>Sub1
<ul class="last">
<li>Sub2</li>
<li>Sub2</li>
<li>Sub2</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>