I have a menu which is developed using bootstrap. Currently it has a CSS transition effect when you hover over each item I line is placed under each heading. I can't seem to figure out how can I do the same but on top of the heading and the transition effect coming from the other direction.
The code I have so far is
.navbar ul li:after {
content:'';
display: block;
height: 4px;
width: 0;
transition: width .6s ease, background-color .6s ease;
}
.navbar ul li:hover:after {
width: 100%;
background: #fff;
}
I have created a JSFiddle Here
Thanks in advance for all your help.
.navbar ul li:before,
.navbar ul li:after {
content:'';
display: block;
position:absolute;
height: 4px;
width: 0;
background: #fff;
transition: width .6s ease, background-color .6s ease;
}
.navbar ul li:before{ top:0; right:0; }
.navbar ul li:after { bottom:0; left:0; }
.navbar ul li:hover:before,
.navbar ul li:hover:after{ width: 100%; }
http://jsfiddle.net/RokoCB/zpxtre6n/4/
demo - http://jsfiddle.net/zpxtre6n/5/
just add float:right for your .navbar ul li:after and float:left for .navbar ul li:before
.navbar ul li:after, .navbar ul li:before {
content:'';
display: block;
height: 4px;
width: 0;
float:right;
transition: width .6s ease, background-color .6s ease;
}
.navbar ul li:before{
float:left;
}
.navbar ul li:hover:after, .navbar ul li:hover:before {
width: 100%;
background: #fff;
}
Related
I am currently working on a menu bar that expands vertically upwards. When I change the overflow to visible rather than hidden, the menu expands in the correct place, however the whole menu is visible which I do not want to happen. With overflow:hidden; the menu expands but only when you hover over the partially expanded menu above where I would like it to expand. Can anyone help?
.HomeBottomMenu {
-webkit-font-smoothing:antialiased;
text-align: center;
text-align: justify;
position: fixed;
bottom: 6em;
z-index:9999;
}
.HomeBottomMenu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.HomeBottomMenu ul ul {
height: 0px;
}
.HomeBottomMenu ul ul:hover {
height:532px;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.HomeBottomMenu ul li{
position: relative;
line-height: 21px;
min-width: 220px;
text-align: center;/* Used to be left*/
background: #424242;
}
.HomeBottomMenu ul li a{
display: block;
padding: 8px 8px;
color: #fff;
text-decoration:none;
text-align: left;
font-family: 'BebasNeueRegular', Arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
.HomeBottomMenu ul li a:hover{
color: #fff;
background: #25a0da;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.HomeBottomMenu ul li .dropdown{
background: #f2f2f2;
display: hidden;
position: absolute;
left: -0.01em;
overflow: hidden;
}
.HomeBottomMenu ul li:hover .dropdown{
/* Display the initial dropdown */
display: block;
bottom: 100%;
position: absolute;
background: #939393;
min-height: 50px;
}
.HomeBottomMenu ul li ul.dropdowndropdown {
position: relative;
height:100%;
display:inline-block;
bottom:100%;
}
.HomeBottomMenu ul li ul :hover .dropdowndropdown{
position: relative;
display:inline-block;
}
.HomeBottomMenu ul li ul.dropdowndropdown li{
display: inline-block;
/*Colour of level 1, level 2...*/
background-color: rgba(0, 90, 235, 0.33);
bottom: 100%;
}
.HomeBottomMenu ul li ul.dropdowndropdown li:hover{
position: relative;
}
.HomeBottomMenu ul li ul.dropdowndropdown li a{
color:#fff;
font-size:16px;
padding: 10px 10px;
text-align:center;
}
.HomeBottomMenu ul li ul .dropdowndropdown li a :hover{
color: #fff;
}
Changed the following and it works now:
.HomeBottomMenu ul li .dropdown{
background: #f2f2f2;
position: absolute;
left: -0.01em;
overflow:hidden;
display: none;
}
.HomeBottomMenu ul li:hover .dropdown{
display: block;
bottom: 0%;
position: absolute;
background: #939393;
min-height: 50px;
}
Good evening,
I have problem with my menu links. When I see it on mobile and zoom it for text, links just jump out from pannel to next row.( http://www.abclinuxu.cz/data/prilohy/0/6/214560-img_1705-3567267490611876903.PNG ) I have set position fixed etc.. How can I force this bug? Thank you for advices!
HTML:
<div id="nabidka">
<div id='cssmenu'>
<ul>
<li><a href='#about'>O nás</a></li>
<li><a href='#cenik'>Ceník</a></li>
<li><a href='#sluzby'>Služby</a></li>
<li><a href='#kontakt'>Kontakt</a></li>
</ul>
</div>
</div>
CSS:
#nabidka {
width:550px;
height: 90px;
margin-left: 1.5em;
padding-top: 5px;
float:left;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
list-style: none;
line-height: 80px;
margin: 0 auto;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
line-height: 80px;
height:90px;
}
#cssmenu > ul {
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
font-size: 20px;
text-transform: ;
text-decoration: none;
color: white;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #f26c4f;
}
#sipka {
position: absolute;
left: -1000px;
}
#cssmenu #menu-indicator {
position: absolute;
bottom: 0;
display: block;
height: 0;
width: 0;
border: 7px solid transparent;
border-bottom-color: white;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
I cannot see what it is supposed to look like. Try to share a link to your html file.
However, I believe the issue lies in your CSS. You are using a combination of px values combined with em. Try to put the line-height for #cssmenu in em, perhaps that is the issue.
From a really fast look at your code, i think the issue is related to the element getting collapsed due to the "float: left".
This issue is easily fixed with .clearfix method Clearfix snippet. You fix this issue by placing the .clearfix class on the parent element or on any parent of the elements you float.
Another simple solution, which i would not recommend is using overflow:hidden;
Hope this helps.
I'm new to CSS, and if I'm honest don't really know what I'm doing. For a while now I've been trying to make the child page on the dropdown menu to be at least the same width as the parent page.
After hours of being frustrated that nothing I find on google works, I figured that I should ask someone who actually knows what they're doing. This is the (awful) code:
.menu li > a:after {
color: #fff;
content: ' ▼';
}
.menu li > a:only-child:after {
content: '';
}
#main-nav {
background-color: #6699FF;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
display: block;
float: left;
width: 100%;
}
#main-nav li {
position: relative;
}
#main-nav ul {
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
position: relative;
list-style: none;
display: block;
}
#main-nav ul li {
float: left;
display: block;
position: relative;
}
#main-nav ul li a {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
display: inline;
}
#main-nav a:link, #main-nav a:visited {
color: #FFF;
display: block;
padding: 10px 25px;
height: 20px;
}
/*Sub menus */
#main-nav {
overflow: visible;
}
#main-nav ul {
right: 0;
}
#main-nav ul li ul.sub-menu {
position:absolute;
display:none;
margin: 0;
padding: 0!Important;
float: none;
}
#main-nav ul li:hover ul.sub-menu {
display:block!important;
float: none;
white-space: nowrap;
}
#main-nav ul li ul.sub-menu li {
background: #6699FF;
text-align: left;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
width: auto;
left:0;
}
#main-nav ul li ul.sub-menu li a {
width: auto;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
}
This is what it looks like when I hover over the parent 'meep' page:
http://i.imgur.com/rAXvvbP.png?1
I would like it to be the same width, starting from the left so that any excess width due to a long page name would go to the right.
I've tried changing the display type and widths, nothing yet :(
I'd greatly appreciate any help! Thanks in advance
and sorry for the terrible code
JSfiddle: http://jsfiddle.net/q5381Ly5/1/
I only change these two, add width 100%, it will get the whole width of the parent.
here is a demo http://jsfiddle.net/q5381Ly5/4/
#main-nav ul li:hover ul.sub-menu {
display:block!important;
float: none;
white-space: nowrap;
width:100%;
}
#main-nav ul li ul.sub-menu li {
width:100%;
background: #6699FF;
text-align: left;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
left:0;
}
Instead of having width auto to your submenu do change it to 100%
Since a couple of days I'm working on a navigation bar for my website. But I want to center it . Here's my CSS
.nav{
float:right;width:980px
}
.nav ul {
width: 980px;
margin: 0 auto;
padding: 0;
list-style: none;
font-size: 1.5em;
font-weight: 300;
}
.nav li {
float: right;
width: 87px;
text-align: center;
-webkit-transition: border .5s;
-moz-transition: border .5s;
-o-transition: border .5s;
-ms-transition: border .5s;
transition: border .5s;
}
.nav a {
display: block;
width:87px;height: 74px;
}
.no-touch .nav a:hover ,
.nav a:active ,
.nav a:focus {
height: 84px;
}
.nav li span {
display: block;
font-family:"Droid Arabic Kufi";
The float on the nav is unnecessary and the with on the .nav prevents the .nav ul to center.
.nav {
float: right; // Remove this.
width: 100%; // Change this.
}
http://jsfiddle.net/7TBHn/2/
Though in my jsfiddle I use the nav element to be more semantic, but other then that it makes no difference.
Put this in your .nav ul:
margin-left:auto;
margin-right:auto;
This should center it. Hope this helps!
I made my website responsive for tablet and smartphone. I used hover for desktop size, but on mobile size there's hover to. I want to change the hover on the mobile device to a touch without using javascript. I heard something about the no-touch modernizr to change hover to touch event?
nav{
margin-left: 2.7em;
}
nav ul ul {
display: none;
background: #5f6975;
border-radius: 0em;
padding: 0;
position: absolute;
top: 100%;
visibility: hidden;
-webkit-transiton: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-transition: opacity 0.5s;
}
nav ul li:hover > ul {
display: block;
opacity: 1;
visibility: visible;
}
nav ul {
background: #333333;
padding: 0 1em;
border-radius: 1em;
list-style: none;
position: relative;
display: inline-block;
}
nav ul li {
float: left;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
nav ul li:hover {
background: #555555;
}
nav ul li:hover a {
color: #ffffff;
}
nav ul li a {
font: 90% helvetica;
display: block;
padding: 1.7em 2em;
color: #ffffff;
text-decoration: none;
}
nav ul ul li {
float: none;
border-top: 0.1em solid #6b727c;
border-bottom: 0.1em solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 1em 2em;
}
nav ul ul li a:hover {
background: #292F41;
}
#media only screen and (max-width:40em)
What do i need to put here to disable the hover function for mobile and make it a touch?