I have a standard pure CSS dropdown menu that needs to be supported back to ye olde IE7. My bug is that the submenu will disappear as the user moves their mouse down the links.
GIF illustration
I have been reading about IE7 stacking contexts and it is my understanding that I should be able to set { position: relative; z-index: (something large); } on the parent element of my menu to deal with the disappearing submenu.
This has not worked for me, and I can't find anything in my page content that would have a higher z-index than the menu anyway. (For one thing, nothing actually gets painted over the menu.) Got any clues? Here is my markup (or see Codepen):
<div class="mainmenu">
<div class="row">
<a href="/" class="pull-left">
<img src="logo.png" class="logo">
</a>
<ul class="nav-main">
<li>Item 1</li>
<li>Item 2</li>
<li><a class="dropdown">Item 3 </a>
<ul class="nav-sub">
<li>Sub-Item 1</li>
<li>Sub-Item 2</li>
<li>Sub-Item 3</li>
</ul>
</li>
<li><a class="dropdown">Item 4 </a>
<ul class="nav-sub">
<li>Sub-Item 1</li>
<li>Sub-Item 2</li>
<li>Sub-Item 3</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="content">
<!-- Then some page content -->
</div>
The CSS (colors removed):
.mainmenu {
position: relative;
top: 0;
z-index: 597;
width: 100%;
height: 66px;
margin: 0;
padding: 0 22px;
}
.mainmenu .logo {
height: 39px;
margin: 16.5px 0;
vertical-align: middle;
}
ul.nav-main {
margin: 0;
float: right;
padding: 0 20px;
position: relative;
top: 0;
}
ul.nav-main a,
ul.nav-main li {
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
}
ul.nav-main li {
list-style-type: none;
padding: 22px 8px;
float: left;
}
ul.nav-main li a,
ul.nav-main li span {
display: block;
}
ul.nav-main li:hover ul {
visibility: visible;
opacity: 1;
}
ul.nav-main ul.nav-sub {
visibility: hidden;
opacity: 0;
position: absolute;
padding: 0;
margin: 0;
top: 66px;
}
ul.nav-main ul.nav-sub li {
display: block;
float: none;
padding: 0;
outline: 1px solid #aaa;
}
ul.nav-main ul.nav-sub li a,
ul.nav-main ul.nav-sub li span {
display: block;
padding: 11px;
}
Any help would be appreciated.
ul.nav-main ul.nav-sub {
visibility: hidden;
opacity: 0;
position: absolute;
padding: 0;
margin: 0;
top: 100%;
}
it works for me perfectly in IE7
codepen
Related
The ::after selector will inserts something after the content, is this targetable with the preceding selector ~?
For example, HTML:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
::after
</ul>
CSS:
ul::after {
content: '';
display: block;
height: 50px;
width: 100%;
background: red;
}
ul li:hover ~ ::after {
background: blue;
}
CODE EXAMPLE
Below you are able to find a working version of what I am after. However I did this with the "sub-menu-bar" div included. Now it seems the ::after pseudo element is positioned at the exact location in the DOM inspector. It would be nice if it could be done without the div.
The reason why the submenu bar is on the UL is because I don't want the bar to move when switching between two items which have a submenu.
ul, li
{
list-style: none;
padding: 0;
margin: 0;
}
a
{
cursor: pointer;
display: block;
color: inherit;
text-decoration: none;
text-transform: uppercase;
}
a > *
{
user-select: none;
}
ul.menu
{
position: relative;
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
background: #FFF;
}
ul.menu > li.menu-item > a
{
padding: 0px 10px;
height: 50px;
overflow: hidden;
transition: height 0.3s;
}
ul.menu > li.menu-item > ul.sub-menu
{
position: absolute;
right: 0px;
bottom: 0px;
left: 0px;
display: flex;
width: 100%;
height: 0px;
align-items: center;
justify-content: center;
transition: height 0.4s;
color: #FFF;
}
ul.menu > li.menu-item > ul.sub-menu > li.menu-item
{
overflow: hidden;
}
ul.menu > li.menu-item > ul.sub-menu > li.menu-item > a
{
padding: 0px 10px;
transform: translateY(100%);
opacity: 1;
transition-property: transform, opacity;
transition-timing-function: cubic-bezier(0.52, 0.16, 0.24, 1);
transition-delay: 0s;
transition-duration: 0.2s;
}
ul.menu > div.sub-menu-bar
{
content: '';
display: block;
width: 100%;
height: 2px;
flex-basis: 100%;
transition: height 0.4s;
background: #000;
}
ul.menu > li.menu-item-has-children:hover > ul.sub-menu
{
height: 50px;
}
ul.menu > li.menu-item-has-children:hover > ul.sub-menu > li.menu-item > a
{
transform: translateY(0%);
opacity: 1;
transition-delay: 0.2s;
}
ul.menu > li.menu-item-has-children:hover ~ div.sub-menu-bar
{
height: 50px;
}
<ul class="menu">
<li class="menu-item"><a>Item #1</a></li>
<li class="menu-item menu-item-has-children">
<a>Item #2</a>
<ul class="sub-menu">
<li class="menu-item"><a>Subitem #2.1</a></li>
<li class="menu-item"><a>Subitem #2.2</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a>Item #3</a>
<ul class="sub-menu">
<li class="menu-item"><a>Subitem #3.1</a></li>
<li class="menu-item"><a>Subitem #3.2</a></li>
</ul>
</li>
<li class="menu-item"><a>Item #4</a></li>
<li class="menu-item"><a>Item #5</a></li>
<div class="sub-menu-bar"></div> <!-- Can we avoid this with ::after pseudo element? -->
</ul>
<p>Content below the navigation.</p>
When I hover on a specific list item (li) targeted with a class name.
I like the background color of the ::after element to change, which is
located on ul::after.
Yes, you can achieve this effect using pointer-events.
The way to do it is to apply to both the <ul> and the <li> the style:
ul, li {
pointer-events: none;
}
and apply to the hoverable <li> the style:
li.hover-over-this {
pointer-events: auto;
}
Working Example:
ul {
position: relative;
margin-left: 0;
padding-left: 0;
font-weight: bold;
background-color: white;
cursor: pointer;
}
li {
width: 50%;
padding: 6px;
color: rgb(255, 255, 255);
line-height: 24px;
background-color: red;
list-style: none;
}
ul:hover::after {
content: 'Hovering!';
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
line-height: 100px;
color: rgb(255, 0, 0);
text-align: center;
background-color: rgb(255, 255, 0);
}
ul, li {
pointer-events: none;
}
li.hover-over-this {
pointer-events: auto;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="hover-over-this">Hover Over This</li>
<li>5</li>
</ul>
Further Reading:
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
This does not require a ~. the ~ selector selects all siblings after the element. The pseudo element ::after is inside the li.
li:hover ~ li would for example target all li elements after the li that is hovered.
For what you want to do, use:
ul li:hover:after {
background: blue;
}
Edit:
Sorry, I didn't see the after applied to ul. This is not possible with pure CSS as there is no "parent" selector. You can only use ul:hover:after (or anything higher in hierarchy than ul) to target the after element.
What you could do:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li></li>
</ul>
li:hover ~ li:last-of-type {
//something
}
I'm trying to get a bar to transition in when the li is hovered over however the hover seems to be ignored and nothing happens. If I instead put 'nav ul:hover', it works but the bar pops in under all the li's.
<nav>
<ul>
<li class="nav-li">All Departments</li>
<li class="nav-li">Shop by Room</li>
<li class="nav-li">DIY Projects & Ideas</li>
<li class="nav-li">Home Services</li>
<li class="nav-li">Speacials & Offers</li>
<li class="nav-li">Local Ad</li>
</ul>
</nav>
CSS
.nav-li {
margin-right: 40px;
display: inline-block;
padding-bottom: 2em;
transition: all .5s ease;
cursor: pointer;
position: relative;
}
.nav-li::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width .5s ease;
}
.nav-li:hover .nav-li::after {
background-color: #f96302;
width: 100%;
}
The .nav-li:hover .nav-li::after should be .nav-li:hover::after
.nav-li {
margin-right: 40px;
display: inline-block;
padding-bottom: 2em;
transition: all .5s ease;
cursor: pointer;
position: relative;
}
.nav-li::after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
transition: width .5s ease;
}
.nav-li:hover::after {
background-color: #f96302;
width: 100%;
}
<nav>
<ul>
<li class="nav-li">All Departments</li>
<li class="nav-li">Shop by Room</li>
<li class="nav-li">DIY Projects & Ideas</li>
<li class="nav-li">Home Services</li>
<li class="nav-li">Speacials & Offers</li>
<li class="nav-li">Local Ad</li>
</ul>
</nav>
Try combining the two.
.nav-li:hover::after
Example: https://jsfiddle.net/pc26LnLz/1/
I created a menu with multiple submenus. I've been searching for ways to make the submenus dropdown in a horizontal fashion from the original menu to the submenu, and then to the final submenu (which I can sometimes get by accident, but then I screw everything up and go back to my original horizontal menu with vertical submenus). I've tried changing them to in-line block, static, and block, but I can't force it to work. Is there an easier way? What am I missing?
/* Navigation Bar Menu */
nav {
color: #F00;
min-width: 100%;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display: inline-block;
float: none;
white-space: nowrap;
}
nav a {
display: block;
padding: 0 10px;
color: #F00;
font-size: 20px;
line-height: 30px;
text-decoration: none;
}
nav a:hover {
color: #FFF;
background-color: #CCC;
transition: all .3s ease;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover>ul {
display: inherit;
transition: all .3s ease;
}
nav ul ul li {
min-width: 170px;
display: list-item;
position: relative;
}
nav ul ul ul {
position: absolute;
top: 0;
left: 100%;
}
<nav>
<ul>
<li>Home</li>
<li>About
<ul>
<li>Our Team</li>
</ul>
</li>
<li>Services
<ul>
<li>Cardiovascular
<ul>
<li>Perfusion</li>
<li>PTCA & IABP</li>
<li>ECMO</li>
<li>TAVR</li>
</ul>
</li>
<li>Blood Management
<ul>
<li>Autotransfusion</li>
<li>Platelet Gel</li>
</ul>
</li>
</ul>
</li>
<li>Products
<ul>
<li>Disposables</li>
<li>Featured Products</li>
</ul>
</li>
<li>Contact
<ul>
<li>Employment Inquiries</li>
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
Sorry if I'm missing something, but is this what you're looking for?
https://codepen.io/will0220/pen/VMMgMb
This
nav ul ul li {
display: list-item;
}
Needs the display property removed, display: list-item forces it into rows. Hope this helps!
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 5 years ago.
How can I get my transition to work? From other examples I have seen and tried it look like it should be working. I'm wanting a slight delay on the display of the sub-menu so that they are instantly shown when the mouse rolls over them.
.TopMenuBar {
border: none;
background-color: purple;
width: 100%;
margin: 0;
padding: 0;
}
.TopMenuBar>ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
}
.TopMenuBar>ul,
.dropdown-menu>ul,
.sub-dropdown-menu>ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.TopMenuBar>li {
display: inline;
}
.TopMenuBar a,
.dropdown-menu a,
.sub-dropdown-menu a {
color: white;
text-decoration: none;
padding: 20px;
display: block
}
/* Applys to all links under class TopMenuBar on hover */
.dropdown-menu,
.sub-dropdown-menu {
display: none;
background-color: purple;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
position: absolute;
z-index: 1;
}
/* Applys to all links under class TopMenuBar */
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-menu {
display: block;
transition: all 1s linear 1s;
}
.sub-dropdown {
position: relative;
}
.sub-dropdown-menu {
left: 100%;
top: 0;
white-space: nowrap;
}
<div class="TopMenuBar">
<ul>
<li>Home</li>
<li class="dropdown">Programs
<div class="dropdown-menu">
<ul>
<li>Preschool Mandarin
<li>Grade School Mandarin</li>
<li>High School Mandarin</li>
<li>Weekend Class</li>
<li>Summer Camp</li>
<li class="sub-dropdown">Examination Training
<div class="sub-dropdown-menu">
<ul>
<li>AP Test</li>
<li>YCT Test</li>
<li>HSK Test</li>
</ul>
</div>
</li>
<li class="sub-dropdown">Adult Mandarin
<div class="sub-dropdown-menu">
<ul>
<li>Conversational Mandarin Class</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="dropdown">Resources
<div class="dropdown-menu">
<ul>
<li>Chinese Club</li>
<li>Literature</li>
</ul>
</div>
</li>
<li class="dropdown">Contact us
<div class="dropdown-menu">
<ul>
<li>Customer Service</li>
<li>Careers</li>
</ul>
</div>
</li>
<li class="dropdown">Registration
</ul>
</div>
Cause transitions do not work if element is or has display: none; one way around it is to use visibility:hidden; and opacity: 0;
Also it is better practice to define
transition: all 1s linear 1s;
on the element itself not just on the :hover state
Like so:
.TopMenuBar {
border: none;
background-color: purple;
width: 100%;
margin: 0;
padding: 0;
}
.TopMenuBar>ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
}
.TopMenuBar>ul,
.dropdown-menu>ul,
.sub-dropdown-menu>ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.TopMenuBar>li {
display: inline;
}
.TopMenuBar a,
.dropdown-menu a,
.sub-dropdown-menu a {
color: white;
text-decoration: none;
padding: 20px;
display: block
}
/* Applys to all links under class TopMenuBar on hover */
.dropdown-menu,
.sub-dropdown-menu {
visibility: hidden;
opacity: 0;
background-color: purple;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
position: absolute;
z-index: 1;
transition: all 1s linear 1s;
}
/* Applys to all links under class TopMenuBar */
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
.sub-dropdown {
position: relative;
}
.sub-dropdown-menu {
left: 100%;
top: 0;
white-space: nowrap;
}
<div class="TopMenuBar">
<ul>
<li>Home</li>
<li class="dropdown">Programs
<div class="dropdown-menu">
<ul>
<li>Preschool Mandarin
<li>Grade School Mandarin</li>
<li>High School Mandarin</li>
<li>Weekend Class</li>
<li>Summer Camp</li>
<li class="sub-dropdown">Examination Training
<div class="sub-dropdown-menu">
<ul>
<li>AP Test</li>
<li>YCT Test</li>
<li>HSK Test</li>
</ul>
</div>
</li>
<li class="sub-dropdown">Adult Mandarin
<div class="sub-dropdown-menu">
<ul>
<li>Conversational Mandarin Class</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="dropdown">Resources
<div class="dropdown-menu">
<ul>
<li>Chinese Club</li>
<li>Literature</li>
</ul>
</div>
</li>
<li class="dropdown">Contact us
<div class="dropdown-menu">
<ul>
<li>Customer Service</li>
<li>Careers</li>
</ul>
</div>
</li>
<li class="dropdown">Registration
</ul>
</div>
I have been scouring the web on before and after effects and I just haven't.. found anything remotely helpful. It's like the gray area of CSS. I was wondering how I would go about doing an effect like on twitter's homepage: This is on the hover effect. http://imgur.com/a/jBikq. It has a transition too, but I'm not sure how to implement it. Again i'm not even sure if this is using before and after, I imagine it is hover, but any help would be really appreciated.
Here is my code for my navigation:
<div id="navbar3" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
You can do it with :after and :before pseudo selector.
Im created an example based on your image, its look like this:
#import url('https://fonts.googleapis.com/css?family=Roboto');
body{
padding: 5%;
}
.exemple {
font-family: 'Roboto', sans-serif;
position: relative;
padding: 2.5% 3.5%;
text-decoration: none;
font-size: 0.9em;
color: #333333;
transition: ease .1s;
-webkit-transition: ease .1s;
}
.exemple:before {
font-family: 'FontAwesome';
content: '\f0e7';
font-size: 1.1em;
margin-right: 10px;
}
.exemple:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0px;
background: #20abe1;
transition: ease .1s;
-webkit-transition: ease .1s;
}
.exemple:hover {
color: #20abe1;
}
.exemple:hover:after{
height: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
Moments
Working Fiddle
You can definitely use a ::before or you can animate the border/padding and it will create the same grow effect. Working fiddle here: FIDDLE
You haven't provided a much detail on the exact thing you're attempting to replicate. I'm going to assume it's the underline that animates up from the bottom of a navigation item.
To do this you will need to use CSS transition.
A simplified version of what Twitter is doing is below. They set a height on the <a> and <li> and add a border to the <a>. Since they have overflow:hidden; applied to the border of the <li> the border they applied to the <a> is initially hidden.
When the <li> is hovered the height of the <a> is reduced. They use transition on the height to animate the border up into view.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
float: left;
height: 40px;
overflow: hidden;
}
a {
display: block;
height: 40px;
padding: 0 10px;
line-height: 40px;
text-decoration: none;
overflow: hidden;
border-bottom: 3px solid #0c0;
transition: height 250ms ease-in-out;
}
li:hover a {
height: 37px;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
Here is another way of animating in the underline with pseudo elements.
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
float: left;
}
a {
display: block;
padding: 0 10px;
line-height: 40px;
text-decoration: none;
}
a:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
display: block;
height: 0;
width: 100%;
text-align: center;
background-color: #0c0;
transition: height 250ms ease-in-out;
}
li:hover a:after {
height: 3px;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>