I'm trying to get rid of the flickering I'm getting after I added negative top margin (so that it would be visible above my navbar) to my < li > item. Here's the JSFiddle's link: http://fiddle.jshell.net/xv6mk/.
And the code just in case.
HTML:
<ul>
<li>Main</li>
<li>Subpage 1</li>
<li>Subpage 2</li>
<li>Subpage 3</li>
<li>About</li>
</ul>
And CSS:
ul {
display: inline;
list-style: none;
}
li {
font-size: 16px;
display: inline-block;
margin-right: -6px;
padding: 16px;
cursor: pointer;
display:inline-block;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
li:hover {
background: white;
color: #74DF00;
border-top: 10px solid #525458;
margin-top: -10px;
}
I will really appreciate help :) .
EDIT: Adding this 2 lines to < li > item (not only hover) works like charm. Thank you :) .
border-top: 10px solid #848484;
margin-top: -10px;
The problem is the transition property, you are transitioning everything, try the following:
transition-property: color, border-top, background;
Just add the prefixes for cross browser support.
Fiddle: http://fiddle.jshell.net/xv6mk/3/
Related
I'm trying to create a mobile vertical dropdown menu but I'm having an issue with showing the items of the sub-menu by using :focus for both .
I found a workaround by using :focus for sub-menu and :focus-within for its items .
This solution is working and showing the sub-menu items for Google Chrome only while other browsers like Samsung internet and UC browser are not showing any except the :focus of sub-menu.
I found another solution by using :hover for both and it's working for almost all browsers.
I have two questions:
Why it was working only with chrome only?
How do I use :focus for both the sub-menu and its items?
CSS used :
.main-nav a {
color:black;
display: block;
padding: 10px 3px 10px 3px;
font-size: 20px;
text-align: center;
font-family: 'hayah';
border-radius: 25px;
transition: border-radius 0.2s ease-in;
}
.main-nav a:hover {
background:#D7D7D7;
border-radius:25px 25px 0 0;
-webkit-transition: border-radius 0.1s ease-in;
-moz-transition: border-radius 0.1s ease-in;
-o-transition: border-radius 0.1s ease-in;
transition: border-radius 0.1s ease-in;
display: block;
}
.main-nav-ul ul {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
max-height: 0;
overflow: hidden;
background-color: #D9D9D9;
color: black;
margin-bottom: 10px;
margin-top: 5px;
border-radius: 0 0 25px 25px;
font-size: 12px;
}
.main-nav-ul li:hover ul {
opacity: 1 !important;
max-height: 400px !important;
color: black;
background-color: #E2E2E2;
display: block;
}
Its hard to know what answer would work best for this situation without seeing how you implemented your HTML. :focus-within is not supported well: https://caniuse.com/#search=focus-within. Without seeing anything else I'm thinking maybe you would use JS to add and remove :hover/:focus like this answer: Can I disable a CSS :hover effect via JavaScript?. That way when you are not displaying sub-items you can get not use their hover effects.
My page no longer applies the :hover effect to my .tabs li element, but I can't for the life of me figure out why. I commented out my jQuery script and it still won't work.
Here's a JSFiddle: https://jsfiddle.net/qpmg4wzq/
<div id="tabs-container">
<ul class="tabs">
<li class="tab current" data-tab="tab-1">tab 1</li>
<li class="tab" data-tab="tab-2">tab 2</li>
<li class="tab" data-tab="tab-3">tab 3</li>
<li class="tab" data-tab="tab-4">tab 4</li>
</ul>
</div>
#tabs-container {
float: left;
width: 100%;
overflow: hidden;
}
.tabs {
padding: 0px;
list-style: none;
clear: left;
float: left;
left: 50%;
}
.tabs li {
display: block;
float: left;
right: 50%;
margin: 0;
padding: 10px 20px 5px 20px;
cursor: pointer;
font-size: 1.1em;
line-height: 2em;
-webkit-transition: color .2s linear;
-moz-transition: color .2s linear;
-ms-transition: color .2s linear;
-o-transition: color .2s linear;
transition: color .2s linear;
-webkit-transition: background .2s linear;
-moz-transition: background .2s linear;
-ms-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
}
.tabs li:hover {
background: #88abc2!important;
}
.tabs li.current {
background: #d0e0eb;
color: #49708a;
}
.tab-content {
display: none;
padding: 15px;
line-height: 1.4;
}
.tab-content.current {
display: inherit;
}
Thanks.
Your .tab-content is overlapping the .tabs-container so any :hover action you make is actually registering as a hover on the .tab-content element.
A couple of options to solve this
Move the tab-content down using margin-top
.tab-content.current {
display: inherit;
margin-top: 60px;
}
Remove float: left from #tabs-container
any ide what is it? The white box between two menu item.(circled with red)
CSS:
#navigation {
list-style-type: none;
margin: 0;
padding: 0;
vertical-align: middle;
line-height: 50px;
}
#navigation a {
text-decoration: none;
display: inline-block;
padding-bottom: 15px;
color: #383838;
webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s;
}
#navigation a:hover {
color: #6A98DD;
}
#navigation li {
display: inline-block;
padding-left: 9px;
padding-right: 10px;
color: #383838;
background: #EEE;
webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.6s;
webkit-transition: background 0.4s;
-moz-transition: background 0.4s;
-ms-transition: background 0.4s;
-o-transition: background 0.4s;
transition: background 0.4s;
}
#navigation li:hover {
padding-left: 8px;
color: #6A98DD;
display: inline-block;
background: #EEE;
border-left: 1px solid #AAA;
}
It is because your li are set todisplay: inline-block; - inline elements are effectively treated like textual nodes, so if each li is on a newline in your HTML this is interpreted as a space.
There are a number of ways to prevent this- one is to set font-size:0; on your ul then font-size:14px; on your li
Alternatively, you can float:left your li and set overflow:hidden on your ul
Or, you can remove the newline in your HTML- putting all your li on a single line.
See here for some other techniques and information, and here
Inline block display mode is the culprit.
#navigation li {
display: inline-block;
...
}
Instead, you can make this way, with the above code, add this in the end:
#navigation {
overflow: hidden;
}
#navigation li {
float: left;
}
Float your li's left like so;
#navigation li {
float: left;
}
the solution is:
Set float left on elements. Or...
Set font-size: 0 on parent and reset font size on children font-size: 1.
That happens becouse of white space between elements. another solution is to use some syntax that prevents spaces, like so:
<div id="navigation">
<li>Item 01</li><li>
Item 02</li><li>
Item 03</li><li>
Item 04</li><li>
Item 05</li>
</div>
Here an example:
1) set float left on childern: http://jsfiddle.net/27t5ogsj/2/
2) font-size method (simply css): http://jsfiddle.net/27t5ogsj/
3) html pre-format method: http://jsfiddle.net/27t5ogsj/1/
Personally i like the second method becouse then i can center horizontally the menu with an simple text-align: center on parent! http://jsfiddle.net/27t5ogsj/3/
Problem
I created a drop-down menu done purely with CSS, using an absolute positioning method shown via a tutorial. Works great. In Safari, it's slow, laggy, and the links are spaced out.
This drop-down menu works perfectly in all browsers other than Safari.
Why?
<ul id="nav">
<li>
Home
<ul>
<li>About Us</li>
<li>Contact Us</li>
<li>Managed Services</li>
</ul>
</li>
<li>
Computer
<ul>
<li>Malware Removal</li>
<li>Diagnostic</li>
<li>Backup & Restore</li>
<li>Data Recovery</li>
<li>Phone Accessories</li>
</ul>
</li>
<li>
Security
<ul>
<li>Surveillance</li>
<li>Security Systems</li>
</ul>
</li>
<li>
Home Automation
<ul>
<li>HAI</li>
<li>RTI</li>
</ul>
</li>
<li>
Home Audio / Video
<ul>
<li>TV Installation</li>
<li>Wall Mounting</li>
<li>Sound Systems</li>
<li>Home Theater</li>
<li>Munitio Earphones</li>
</ul>
</li>
</ul>
CSS
/* Header */
#nav {
margin-left: 9%;
list-style: none;
font-weight: bold;
margin-bottom: 10px;
margin-top: 40px; /* Clear floats */
float: left;
width: 90%; /* Bring the nav above everything else--uncomment if needed.
position: relative;
*/
z-index: 5;
}
#nav li {
float: left;
margin-right: 2%;
}
#nav a {
display: block;
padding: 5px;
color: black;
background: none;
text-decoration: none;
font-size: 14px;
-webkit-transition: color 0.2s, text-shadow 0.3s;
-moz-transition: color 0.2s, text-shadow 0.3s;
-o-transition: color 0.2s, text-shadow 0.3s;
-ms-transition: color 0.2s, text-shadow 0.3s;
transition: color 0.2s, text-shadow 0.3s;
}
#nav a:hover {
color: white;
background: none;
text-decoration: none;
text-shadow: 0px 0px 3px #000;
}
/*---DROPDOWN ---*/
#nav ul {
z-index: 5;
background: none; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background: rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style: none;
width: 0px;
overflow: hidden;
color:white;
left: -9999px; /* Hide off-screen when not needed (this is more accessible than display: none;
*/
-webkit-transition: color 0.2s, text-shadow 0.3s;
-moz-transition: color 0.2s, text-shadow 0.3s;
-o-transition: color 0.2s, text-shadow 0.3s;
-ms-transition: color 0.2s, text-shadow 0.3s;
transition: color 0.2s, text-shadow 0.3s;
}
#nav ul li {
padding-top: 1px; /* Introducing a padding between the li and the a give the illusion spaced items */
color:white;
float: none;
}
#nav ul a {
white-space: nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul {
/* Display the dropdown on hover */
left: 0; /* Bring back on-screen when needed */
overflow: hidden;
width: 150px;
-webkit-transition: width 0.2s;
-moz-transition: width 0.2s;
-o-transition: width 0.2s;
-ms-transition: width 0.2s;
transition: width 0.2s;
}
#nav li:hover a {
/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background: none;
margin-right: -10px;
text-decoration: none;
-webkit-transition: margin-right 1s;
-moz-transition: margin-right 1s;
-o-transition: margin-right 1s;
-ms-transition: margin-right 1s;
transition: margin-right 1s;
}
#nav li:hover ul a {
/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration: none;
width: 120px;
}
#nav li:hover ul li a:hover {
/* Here we define the most explicit hover states--what happens when you hover each individual link. */
background: #333;
width: 150px;
}
Include the attribute onClick=”return true” inside the major <li> tags, like this:
<li onClick="return true">
Security
<ul>
<li>Surveillance</li>
<li>Security Systems</li>
</ul>
</li>
I hope this helps you.
Regards
I'm trying to create a horizontal menu that increases in height and displays a vertical list when you hover over it. If there is a way to make a smooth transition when the menu increases in height that would be nice too.
#nav {
width: 100%;
height: 20px;
background-color: #989898;
}
#nav:hover {
height: 80px;
}
#nav li {
display: inline;
padding: 15px;
}
#nav a {
color: black;
text-decoration: none;
}
<div id="nav">
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
</ul>
</div>
Here's a gif demonstration of what I want to do:
I added this code to yours to make it animate:
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
Here is a fiddle:
http://jsfiddle.net/Hive7/7HS8p/
Check out this example: its similar to what u want...
Link
Something like this?
jsFiddle demo here
-webkit-animation: move .5s;
-webkit-animation-fill-mode: forwards;
#-webkit-keyframes "move" {
100% {
height:80px;
}
}