I want to change the color of the "Green" backline while hovering the menu items. The color will be changed according to the hovered menu item; i.e. when hovering on the first item, the backline color will be that "Bluish". How can I get this effect? Here is my JSFiddle: http://jsfiddle.net/n86UN/embedded/result/
Also, How can I set the 'span' elements(hovered effect) always right under the respective color blocks if I change the width or height of the blocks. As you see I have changed the width & height of the blocks from 120px to 150px. And the span elements are appearing haphazardly.
Thank U in advance...
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flat Nav</title>
<style type="text/css" media="screen">
nav{
position: relative;
text-align: center;
}
nav:after {
content: "";
width: 100%;
height: 2px;
background-color: green;
position: absolute;
right: 0;
top: 50%; /* 50% from the top */
z-index: -1;
}
nav ul {
display: inline-block; list-style: none; position: relative;
}
nav ul li {
float: left; margin: 0 20px 0 0;
}
nav ul li a {
display: block; width: 150px; height: 150px; opacity: 0.9;
}
nav ul li:nth-child(1) a {
background-color: #5bb2fc;
}
nav ul li:nth-child(2) a {
background-color: #58ebd3;
}
nav ul li:nth-child(3) a {
background-color: #ffa659;
}
nav ul li:nth-child(4) a {
background-color: #ff7a85;
}
nav ul li a span {
font: 20px "Dosis", sans-serif; text-transform: uppercase;
display: none;
}
nav ul li a:hover span {
display: block;
}
nav ul li:nth-child(1) a span {
color: #5bb2fc;
position: absolute; left: 70px; top: 160px;
}
nav ul li:nth-child(2) a span {
color: #58ebd3;
position: absolute; left: 200px; top: 160px;
}
nav ul li:nth-child(3) a span {
color: #ffa659;
position: absolute; left: 320px; top: 160px;
}
nav ul li:nth-child(4) a span {
color: #ff7a85;
position: absolute; left: 470px; top: 160px;
}
</style>
</head>
<body>
<div id="demo">
<nav>
<ul>
<li>
<a href="#">
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span>About</span>
</a>
</li>
<li>
<a href="#">
<span>Portfolio</span>
</a>
</li>
<li>
<a href="#">
<span>Contact</span>
</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
A working example on JSFiddle. It works in Chrome 32.0.1700.68 beta and Safari 7.0.1. I don't know if this works in any other browsers.
<body>
<div id="demo">
<nav>
<ul>
<li>
<a class="nav nav-blue" href="#">
<span class="label-wrapper">
<span class="label">Home</span>
</span>
<span class="nav-after"></span>
</a>
</li>
<li>
<a class="nav nav-green" href="#">
<span class="label-wrapper">
<span class="label">About</span>
</span>
<span class="nav-after"></span>
</a>
</li>
<li>
<a class="nav nav-yellow" href="#">
<span class="label-wrapper">
<span class="label ">Portfolio</span>
</span>
<span class="nav-after"></span>
</a>
</li>
<li> <a class="nav nav-red" href="#">
<span class="label-wrapper">
<span class="label">Contact</span>
</span>
<span class="nav-after"></span>
</a>
</li>
</ul>
</nav>
</div>
</body>
CSS:
nav {
position: relative;
text-align: center;
}
nav:after, .nav-after {
content:"";
width: 100%;
height: 2px;
position: absolute;
right: 0;
top: 50%;
/* 50% from the top */
}
nav:after {
background-color: green;
z-index: 1;
}
nav ul {
display: inline-block;
list-style: none;
}
nav ul li {
float: left;
margin: 0 20px 0 0;
}
.nav {
z-index:100;
width: 150px;
height: 150px;
display:block;
}
.label-wrapper {
position:relative;
width: 150px;
height: 150px;
opacity: 0.9;
display:block;
z-index:100;
}
.label {
position: absolute;
top: 160px;
left: 10px;
font: 20px"Dosis", sans-serif;
text-transform: uppercase;
display: none;
}
.nav:hover .label {
display: block;
}
.nav:hover .nav-after {
display:block;
z-index: 10;
}
/* Colors */
.nav-blue .label-wrapper, .nav-blue:hover .nav-after {
background-color: #5bb2fc;
}
.nav-blue .label {
color: #5bb2fc;
}
.nav-green .label-wrapper, .nav-green:hover .nav-after {
background-color: #58ebd3;
}
.nav-green .label {
color: #58ebd3;
}
.nav-yellow .label-wrapper, .nav-yellow:hover .nav-after {
background-color: #ffa659;
}
.nav-yellow .label {
color: #ffa659;
}
.nav-red .label-wrapper, .nav-red:hover .nav-after {
background-color: #ff7a85;
}
.nav-red .label {
color: #ff7a85;
}
Related
I have left side side bar and right side content. I used flex box to separate them. It works fine. But when scrolling the content the side bar on the left side also scrolls along with the content. I wan to fix the side bar in the same position.
This is the Side bar html
<nav id="sidebar">
<ul class="list-unstyled components">
<li>
<a href="#usersMenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"
>Users</a
>
<ul class="collapse list-unstyled" id="usersMenu">
<li>
<a routerLink="/admins">Admins</a>
</li>
<li>
<a routerLink="/sellers">Sellers</a>
</li>
<li>
<a routerLink="/customers">Customers</a>
</li>
<li>
<a routerLink="/delivery-boys">Delivery Boys</a>
</li>
</ul>
</li>
<li>
<a routerLink="/shop/categories">Categories</a>
</li>
<li>
<a routerLink="/shop/brands">Brands</a>
</li>
<li>
<a routerLink="/shop/products">Products</a>
</li>
<li>
<a routerLink="/shop/orders">Orders</a>
</li>
<li>
<a routerLink="/shop/deliveries">Deliveries</a>
</li>
</ul>
</nav>
This is the Side bar css
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #1d5ea8;
color: #fff;
transition: all 0.3s;
height: 100%;
margin-top: 56px;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #1d5ea8;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386d5;
background: #fff;
}
#sidebar ul li.active > a,
a[aria-expanded='true'] {
color: #fff;
background: #1d5ea8;
}
a[data-toggle='collapse'] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #1d5ea8;
}
This is the app-component.html
<div class="wrapper">
<app-side-nav-bar *ngIf="checkLogin()"></app-side-nav-bar>
<app-horizontal-nav-bar *ngIf="checkLogin()"></app-horizontal-nav-bar>
<div id="content">
<router-outlet></router-outlet>
<app-footer *ngIf="checkLogin()"></app-footer>
</div>
</div>
This is the wrapper and content css
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#content {
width: 100%;
min-height: 100vh;
transition: all 0.3s;
}
Image 1
Image 2
You have to set #content to overflow-y: auto so that the scroll bar scrolls inside the content section and not the whole body.
Wrestling with mutli-drop menu. (97% working) Select United States 1 menu, then pick Nevada menu item. There's a gray bar at the bottom. Same for US -> California. Gray bar below Los Angeles. I've played with margins and padding for a while. The :hover I was hoping would highlight the entire li portion. "Seems" to for all but most bottom menu item. (BTW: US -> California -> San Francisco -> SOMA. You'll see top left corner doesn't quite touch. That's maybe related.)
Any tips welcome. Thanks. Milton.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#nav_wrapper {
margin-top: 20px;
background: #b3c2bf; /* BG color across screen */
}
#nav_wrapper ul
{
list-style:none;
margin: 0;
padding: 0;
background: #b3c2bf; /* BG color across screen */
}
#nav_wrapper ul li
{
display: inline-block;
position:relative;
margin: 0;
padding: 0;
min-width: 150px;
max-width: 150px;
text-align: left;
}
#nav_wrapper ul li a
{
display: block;
/* white here gives the text white color */
color: white;
font-family: Arial, sans-serif;
font-weight: 200;
font-size: 16px;
text-decoration:none;
padding: 0;
margin 0;
}
#nav_wrapper ul ul
{
display:none;
position:absolute;
top: 100%; /* 100% of height of the li element */
padding: 0;
margin 0;
}
#nav_wrapper ul ul a
{
line-height: 120%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#nav_wrapper ul ul ul {
top: 0;
left:100%;
}
p.menutextpadder { padding-left: 12px; padding-top: 4px; padding-bottom: 4px; }
#nav_wrapper ul li:hover > ul { display:block; }
#nav_wrapper ul li:hover { background-color: Blue; color: white; }
</style>
<body>
<nav id="nav_wrapper">
<ul class="topmenu">
<li><p class="menutextpadder">United States 1
<ul>
<li class="dir"><p class="menutextpadder">Arizona</p></li>
<li class="dir"><p class="menutextpadder">California
<ul>
<li><p class="menutextpadder">San Francisco
<ul>
<li><p class="menutextpadder">Pacific Heights</p></li>
<li><p class="menutextpadder">SOMA
<ul>
<li class="dir"><p class="menutextpadder">Spear Street</p></li>
<li class="dir"><p class="menutextpadder">Moscone Center</li>
</ul>
</li>
</ul>
</li>
<li><p class="menutextpadder">Los Angeles</p></li>
</ul>
<li class="dir"><p class="menutextpadder">Nevada</p></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
add the css rule below
ul{
font-size: 0;
}
Snippet below
#nav_wrapper {
margin-top: 20px;
background: #b3c2bf;
/* BG color across screen */
}
#nav_wrapper ul {
list-style: none;
margin: 0;
padding: 0;
background: #b3c2bf;
/* BG color across screen */
}
#nav_wrapper ul li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
min-width: 150px;
max-width: 150px;
text-align: left;
}
#nav_wrapper ul li a {
display: block;
/* white here gives the text white color */
color: white;
font-family: Arial, sans-serif;
font-weight: 200;
font-size: 16px;
text-decoration: none;
padding: 0;
margin 0;
}
#nav_wrapper ul ul {
display: none;
position: absolute;
top: 100%;
/* 100% of height of the li element */
padding: 0;
margin 0;
}
#nav_wrapper ul ul a {
line-height: 120%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#nav_wrapper ul ul ul {
top: 0;
left: 100%;
}
p.menutextpadder {
padding-left: 12px;
padding-top: 4px;
padding-bottom: 4px;
}
#nav_wrapper ul li:hover > ul {
display: block;
}
#nav_wrapper ul li:hover {
background-color: Blue;
color: white;
}
#nav_wrapper .menutextpadder {} ul {
font-size: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<body>
<nav id="nav_wrapper">
<ul class="topmenu">
<li>
<a href="#">
<p class="menutextpadder">United States 1</a>
<ul>
<li class="dir">
<a href="#">
<p class="menutextpadder">Arizona</p>
</a>
</li>
<li class="dir">
<a href="#">
<p class="menutextpadder">California</p>
</a>
<ul>
<li>
<a href="#">
<p class="menutextpadder">San Francisco</a>
<ul>
<li>
<a href="#">
<p class="menutextpadder">Pacific Heights</p>
</a>
</li>
<li>
<a href="#">
<p class="menutextpadder">SOMA</a>
<ul>
<li class="dir">
<a href="#">
<p class="menutextpadder">Spear Street</p>
</a>
</li>
<li class="dir">
<a href="#">
<p class="menutextpadder">Moscone Center</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<p class="menutextpadder">Los Angeles</p>
</a>
</li>
</ul>
<li class="dir">
<a href="#">
<p class="menutextpadder">Nevada</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
When I mouseover the two dropdown lis repeatedly, Portal and Retail, there is a flicker in the entire ul.nav.navbar-nav. In case this is a browser-specific issue, I am using Chrome 51 on Windows 7. I think it's related to the transition effect for displaying the ul.nav.navbar-subnav but I can't seem to isolate the problem. It didn't start happening until after I added the submenus to the top header. Below is a demo of the flickering problem, and compare it to this version which has no flicker.
Update Actually, I just noticed the flicker is also happening in the aside. If I change the --duration to 0, it removes the flicker. New question: is there a way to keep the opacity transition and still remove the flickering?
#import url(//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic);
html {
-webkit-font-smoothing: antialiased;
font-family: 'Source Sans Pro', sans-serif;
}
* {
box-sizing: border-box;
}
a {
cursor: pointer;
}
a.active-module {
cursor: default;
}
li.active > a {
cursor: default;
}
.topnavbar-wrapper {
display: block;
font-size: 14px;
height: 55px;
line-height: 21.4px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 121;
}
.topnavbar {
display: block;
font-size: 14px;
line-height: 21.4px;
margin-bottom: 0px;
min-height: 55px;
position: relative;
width: 100%;
z-index: 1050;
}
.nav-wrapper {
box-sizing: content-box;
display: block;
position: absolute;
font-size: 14px;
line-height: 21.4px;
padding-bottom: 0px;
padding-top: 0px;
z-index: 10;
height: 55px;
left: 68px;
right: 0;
}
.topnavbar .nav {
display: block;
font-size: 14px;
line-height: 21.4px;
margin-bottom: 0px;
margin-right: 0px;
margin-top: 0px;
padding-left: 0px;
white-space: nowrap;
}
.navbar-nav > li {
display: block;
float: left;
font-size: 14px;
line-height: 21.4px;
position: static;
text-align: left;
}
.navbar-nav > li > a {
display: block;
font-size: 14px;
font-weight: bold;
height: 55px;
line-height: 21px;
outline-style: none;
outline-width: 0px;
padding-bottom: 17px;
padding-left: 15px;
padding-right: 15px;
padding-top: 17px;
position: relative;
text-align: left;
text-decoration: none;
}
aside {
bottom: 0px;
display: block;
font-size: 14px;
left: 0px;
line-height: 21.4px;
position: fixed;
top: 55px;
width: 68px;
z-index: 119;
}
.aside-inner {
display: block;
font-size: 14px;
line-height: 21.4px;
overflow-x: hidden;
overflow-y: hidden;
width: 68px;
height: 100%;
}
.sidebar {
display: block;
font-size: 14px;
line-height: 21.4px;
overflow-x: hidden;
overflow-y: scroll;
width: 68px;
height: 100%;
}
.nav {
display: block;
font-size: 14px;
line-height: 21.4px;
margin-bottom: 0px;
margin-top: 0px;
padding-left: 0px;
padding-right: 0px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
.sidebar > .nav > li {
display: block;
width: 68px;
}
.sidebar li > a {
display: block;
position: relative;
padding: 20px 5px;
}
.sidebar > .nav > li > a > em {
display: inline-block;
font-size: 22.4px;
height: auto;
letter-spacing: 0.35px;
line-height: 22.4px;
text-align: center;
width: auto;
}
.sidebar > .nav > li > .sidebar-subnav {
opacity: 0;
position: absolute;
top: 0;
left: 100%;
width: 200px;
pointer-events: none;
}
.sidebar > .nav > li > .sidebar-subnav > li > a {
padding: 10px;
}
.sidebar > .nav > li > .sidebar-subnav > li .center-block {
height: auto;
}
.sidebar > .nav > li:hover > .sidebar-subnav {
opacity: 1;
pointer-events: all;
}
li > a > div {
display: block;
float: left;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.35px;
line-height: 21.4px;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
position: relative;
width: 60px;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.center-block {
display: block;
font-size: 11.9px;
font-weight: bold;
height: 50px;
letter-spacing: 0.35px;
line-height: 18.19px;
margin-left: 0px;
margin-right: 0px;
}
.topnavbar .nav-wrapper {
background-color: var(--top-bg);
border-bottom: var(--border-thickness) solid var(--border);
}
aside > .aside-inner > .sidebar {
width: 87px;
}
aside {
box-sizing: content-box;
background-color: var(--side-bg);
border-right: var(--border-thickness) solid var(--border);
}
.navbar-nav li > a {
color: var(--top-fg);
background-color: var(--top-bg);
transition-property: color, background-color;
transition-duration: var(--hover-duration);
transition-timing-function: ease;
}
aside > .aside-inner > .sidebar > .nav > li > a {
color: var(--side-fg);
background-color: var(--side-bg);
transition-property: color, background-color;
transition-duration: var(--hover-duration);
transition-timing-function: ease;
}
.navbar-nav li:hover > a {
color: var(--hover-top-fg);
background-color: var(--hover-top-bg);
}
aside > .aside-inner > .sidebar > .nav > li:hover > a {
color: var(--hover-side-fg);
background-color: var(--hover-side-bg);
}
.navbar-nav li > a.active-module {
color: var(--active-top-fg);
background-color: var(--active-top-bg);
transition-duration: var(--active-duration);
}
aside > .aside-inner > .sidebar > .nav > li.active > a {
color: var(--active-side-fg);
background-color: var(--active-side-bg);
transition-duration: var(--active-duration);
}
.sidebar-subnav {
border: var(--sub-border-thickness) solid var(--sub-border);
transition: opacity var(--duration) ease;
}
.sidebar-subnav > li > a {
color: var(--sub-fg);
background-color: var(--sub-bg);
transition-property: color, background-color;
transition-duration: var(--hover-duration);
transition-timing-function: ease;
}
.sidebar-subnav > li:hover > a {
color: var(--hover-sub-fg);
background-color: var(--hover-sub-bg);
}
.sidebar-subnav > li.active > a {
color: var(--active-sub-fg);
background-color: var(--active-sub-bg);
transition-duration: var(--active-duration);
}
.navbar-nav .navbar-subnav {
opacity: 0;
width: 200px;
pointer-events: none;
position: absolute;
z-index: 2;
}
.navbar-nav > li > .navbar-subnav > li > a {
padding: 10px;
display: block;
}
.navbar-nav > li:hover > .navbar-subnav {
opacity: 1;
pointer-events: all;
}
.navbar-subnav {
border: var(--sub-border-thickness) solid var(--sub-border);
transition: opacity var(--duration) ease;
}
.navbar-subnav > li {
position: relative;
}
.navbar-subnav > li > a {
color: var(--sub-fg);
background-color: var(--sub-bg);
transition-property: color, background-color;
transition-duration: var(--hover-duration);
transition-timing-function: ease;
}
.navbar-subnav > li:hover > a {
color: var(--hover-sub-fg);
background-color: var(--hover-sub-bg);
}
.navbar-subnav > li > a.active-module {
color: var(--active-sub-fg);
background-color: var(--active-sub-bg);
transition-duration: var(--active-duration);
}
/* underline hover effect */
.navbar-nav li > a:after {
position: absolute;
content: "";
bottom: 0;
left: 0;
right: 0;
height: 0;
background-color: var(--hover-line-top);
transition: height var(--hover-line-duration) ease;
}
.sidebar-nav li > a:after {
position: absolute;
content: "";
top: 0;
bottom: 0;
right: 0;
width: 0;
background-color: var(--hover-line-side);
transition: width var(--hover-line-duration) ease;
}
.navbar-subnav > li > a:after {
width: 0;
height: auto;
top: 0;
left: 0;
right: auto;
background-color: var(--hover-line-sub);
transition: width var(--hover-line-duration) ease;
}
.sidebar-subnav > li > a:after {
background-color: var(--hover-line-sub);
right: auto;
left: 0;
}
.navbar-nav li > a.active-module:after {
background-color: var(--hover-line-active-top);
}
.sidebar-nav li.active > a:after {
background-color: var(--hover-line-active-side);
}
.navbar-nav > li:hover > a:after {
height: var(--hover-line-thickness);
}
.navbar-subnav > li:hover > a:after,
.sidebar-nav li:hover > a:after {
width: var(--hover-line-thickness);
}
.navbar-subnav > li.active > a:after,
.sidebar-subnav > li.active > a:after {
background-color: var(--hover-line-active-sub);
}
.sidebar .nav > li.active > a > em,
.sidebar .nav > li.open > a > em {
color: inherit;
}
:root {
--edf-orange: #FE5815;
--edf-light-orange: #FFA02F;
--edf-green: #509E2F;
--edf-light-green: #C4D600;
--edf-blue: #005BBB;
--edf-dark-blue: #001A70;
--background: var(--edf-blue);
--color: #FFFFFF;
--border: var(--edf-orange);
--border-thickness: 2px;
--sub-border: var(--edf-dark-blue);
--sub-border-thickness: 1px;
--duration: 0.2s;
--logo-bg: var(--background);
--logo-fg: var(--color);
--top-bg: var(--background);
--top-fg: var(--color);
--side-bg: var(--background);
--side-fg: var(--color);
--sub-bg: #777777;
--sub-fg: var(--color);
--active-top-bg: var(--edf-dark-blue);
--active-top-fg: var(--top-fg);
--active-side-bg: var(--edf-dark-blue);
--active-side-fg: var(--side-fg);
--active-sub-bg: var(--edf-dark-blue);
--active-sub-fg: var(--sub-fg);
--active-duration: var(--duration);
--hover-top-bg: var(--top-bg);
--hover-top-fg: var(--top-fg);
--hover-side-bg: var(--side-bg);
--hover-side-fg: var(--side-fg);
--hover-sub-bg: #3B3B3B;
--hover-sub-fg: var(--sub-fg);
--hover-duration: var(--duration);
--hover-line-thickness: 4px;
--hover-line-top: var(--edf-orange);
--hover-line-side: var(--edf-orange);
--hover-line-sub: transparent;
--hover-line-active-top: transparent;
--hover-line-active-side: transparent;
--hover-line-active-sub: transparent;
--hover-line-duration: var(--duration);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://thesabbir.github.io/simple-line-icons/css/simple-line-icons.css" rel="stylesheet"/>
<header class="topnavbar-wrapper">
<nav class="navbar topnavbar">
<div class="nav-wrapper">
<ul class="nav navbar-nav">
<li>
<a>
<em></em> Portal
</a>
<ul class="nav navbar-subnav nav-floating">
<li>
<a>
<em class="icon-home"></em> Dashboard
</a>
</li>
<li>
<a>
<em class="fa fa-database"></em> Asset Management
</a>
</li>
<li>
<a>
<em class="fa fa-users"></em> Broker
</a>
</li>
<li>
<a>
<em class="fa fa-tasks"></em> Deal Flow
</a>
</li>
<li>
<a>
<em class="fa fa-folder"></em> Documents
</a>
</li>
<li>
<a>
<em class="fa fa-book"></em> ESP
</a>
</li>
<li>
<a>
<em class="fa fa-tags"></em> Invoice
</a>
</li>
</ul>
</li>
<li>
<a>
<em></em> Retail
</a>
<ul class="nav navbar-subnav nav-floating">
<li>
<a>
<em class="icon-layers"></em> Billing
</a>
</li>
<li>
<a>
<em class="icon-globe"></em> Market Data
</a>
</li>
</ul>
</li>
<li>
<a class="active-module">
<em class="fa fa-refresh"></em> Mirror Trades
</a>
</li>
<li>
<a>
<em class="fa fa-line-chart"></em> P&L
</a>
</li>
</ul>
</div>
</nav>
</header>
<aside class="aside">
<div class="aside-inner">
<nav class="sidebar">
<ul class="nav sidebar-nav">
<li>
<a>
<div class="text-center">
<em class="fa fa-random"></em>
</div>
<small class="center-block text-center">Swaps</small>
</a>
</li>
<li>
<a>
<div class="text-center">
<em class="fa fa-bullseye"></em>
</div>
<small class="center-block text-center">Physicals</small>
</a>
</li>
<li>
<a>
<div class="text-center">
<em class="fa fa-link"></em>
</div>
<small class="center-block text-center">Link Trades</small>
</a>
</li>
<li class="active">
<a>
<div class="text-center">
<em class="icon-layers"></em>
</div>
<small class="center-block text-center">Reports</small>
</a>
<ul class="nav sidebar-subnav nav-floating" style="top: 270px;">
<li>
<a class="center-block">
<small class="center-block text-left">Api Error Report</small>
</a>
</li>
<li>
<a class="center-block">
<small class="center-block text-left">Unsupported Trades Report</small>
</a>
</li>
<li>
<a class="center-block">
<small class="center-block text-left">Physical Trade Discrepancy Report</small>
</a>
</li>
<li class="active">
<a class="center-block">
<small class="center-block text-left">Swap Trade Discrepancy Report</small>
</a>
</li>
<li>
<a class="center-block">
<small class="center-block text-left">Physical Trade Tie-out Report</small>
</a>
</li>
<li>
<a class="center-block">
<small class="center-block text-left">Swap Trade Tie-out Report</small>
</a>
</li>
</ul>
</li>
<li>
<a>
<div class="text-center">
<em class="fa fa-exchange"></em>
</div>
<small class="center-block text-center">Sleeve Trades</small>
</a>
</li>
</ul>
</nav>
</div>
</aside>
I can't see the flicker but I have had the same problem. Adding a backface-visibility: hidden !important; or transform: translateZ(0) scale(1,1)!important; worked for me.
Just incase anyone else stumbles across this, another factor is when using the will-change property, example will-change: transform, opacity will sometimes cause flickers.
I have a "hamburger" mobile navigation button that when clicked brings up a div titled #navigation. However, due to where the div is positioned (it is in other divs) the div does not extend to 100% of the width of the document, just 100% of the width of the container div.
Not only is this a problem but there is also a secondary issue because the navigation div also overlaps slightly with both the header div and the div below it. I'd rather it push the header up and the div below it down.
Whilst I could take this div out of the container and possibly fix the problems by placing it elsewhere, that then causes problems with the navigation on the full size version of the page then as the #navigation div is the same for both versions of the page, just different styling. Here's the code.
body {
margin: 0;
line-height: 1.428;
}
.wrap {
width: 90%;
max-width: 71.5em;
margin: 0 auto;
padding: 0.625em 0.625em;
}
#header {
background: #442869;
padding-top: 1em;
padding-bottom: 1em;
min-height: 6em;
}
#mobile-navigation-btn {
display: none;
float: right;
}
#navigation {
display: block;
float: right;
}
#navigation ul {
list-style: none;
}
#navigation li {
display: inline-block;
float: left;
padding-right: 2em;
padding-top: 0.7em;
padding-bottom: 0.7em;
}
#navigation li:last-child {
padding-right: 0em;
}
#navigation li a {
color: #ffffff;
text-decoration: none;
}
.show-menu {
text-decoration: none;
color: black;
background: #ac3333;
text-align: center;
padding: 20px 10px;
border: 1px black solid;
}
.show-menu:hover {
background: #ac1111;
}
#extra {
background: #222922;
padding-top: 1em;
padding-bottom: 1em;
min-height: 2em;
color: white;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #navigation{
display: block;
}
#hamburger {
display: inline-block;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin-bottom: 4px;
background-color: black;
}
#media only screen and (max-width : 920px) {
#mobile-navigation-btn {
display: block;
}
#navigation {
display: none;
width: 100%;
margin: 0;
padding: 0;
background-color:#333333;
top: 0;
left: 0;
}
/*Create vertical spacing*/
#navigation li {
margin-bottom: 1px;
}
/*Make dropdown links vertical*/
#navigation ul li {
display: block;
float: none;
margin:0;
padding:0;
}
/*Make all menu links full width*/
#navigation ul li, li a {
width: 100%;
}
}
<!doctype html>
<head>
<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async>
</script>
<title>
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<div class="wrap">
<picture>
<source srcset="seiri-logo-regular.png" media="(min-width: 1100px)">
<img srcset="seiri-logo-small.png" alt="…">
</picture>
<div id="mobile-navigation-btn">
<label for="show-menu" class="show-menu">
<div id="hamburger">
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</div>
Menu
</label>
</div>
<input type="checkbox" id="show-menu" role="button">
<div id="navigation">
<ul>
<li>
<a href="#" class="current">
Home
</a>
</li>
<li>
<a href="#">
Customer Research
</a>
</li>
<li>
<a href="#">
Business Improvement
</a>
</li>
<li>
<a href="#">
Contact Us
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="extra">
<div class="wrap">
Test
</div>
</div>
</body>
</html>
you could add position: relative; to #header and position: absolute; to #navigation plus top: 69px /*adjust to your needs*/ inside #media only screen and (max-width : 920px) {}
the absolute position takes it out of the flow.
Unabridged Explanation
Last night I was working on replicating an interesting Codepen I found. After I finished it, I was extremely happy with how it worked. Since I wasn't planning on using it in production, I neglected to use the proper CSS prefixes to insure cross-browser compatibility. However, when I decided to check it in Safari and Firefox I noticed that my ":hover" events weren't translating properly, and so far I have been unable to fix it. I do not need this project for anything, but I would like some help figuring out why this is occurring so I can be prepared to address this issue in future developments.
Direct Problem
In Firefox and Safari, when you mouse over the menu items that are to the right of the "Fly-Out" menu headers they collapse, whereas in Chrome they remain out.
I would like to stress that I understand why certain features like the transitions aren't working, as I didn't specify the "webkit" or "moz" prefix for most of them. It is simply the collapsing menu that's troubling me.
Code
ul.sidebar {
display: block;
position: absolute;
margin: 0;
left: 0;
height: 100%;
width: 6.5em;
background: #aa2266;
padding: 0;
text-align: center;
}
ul.sidebar * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul.sidebar a {
color: white;
text-decoration: none;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
ul.sidebar a > i {
margin-top: 0.13333em;
font-size: 2em;
display: block;
margin-bottom: 0.2em;
}
ul.sidebar a > span {
font-size: 0.8em;
font-family: sans-serif;
}
ul.sidebar li {
transition: background 0.3s;
background: #aa2266;
}
ul.sidebar > li {
margin: 0;
padding: 0;
height: 4em;
display: inline-block;
position: relative;
width: 100%;
background: #aa2266;
transition: background 0.3s;
}
ul.sidebar > li:hover {
background: #dc3278;
}
ul.sidebar > li:hover:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 6px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
}
ul.sidebar > li > a {
transition: background 0.3s;
}
ul.sidebar > li > a:hover {
background: #ff5f87;
}
ul.sidebar > li > ul {
overflow: hidden;
height: 4em;
padding: 0;
position: absolute;
z-index: -1;
margin: 0;
color: red;
left: 100%;
transition-delay: 0.3s;
transition-property: transform;
transition-duration: 0.6s;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
width: auto;
list-style: none;
white-space: nowrap;
top: 0;
background: #dc3278;
}
ul.sidebar > li > ul > li {
overflow: hidden;
background: none;
margin: 0 0px 0 -4px;
padding: 0;
display: inline-block;
width: 6.5em;
height: 4em;
transition: background 0.3s;
}
ul.sidebar > li > ul > li:hover {
background: #fa648c;
}
ul.sidebar li:hover > ul {
-webkit-transform: translateX(0);
transform: translateX(0);
}
ul.sidebar li:hover > ul > li {
color: white;
}
body {
padding: 0;
position: fixed;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #450f30;
}
description {
position: absolute;
bottom: 0;
right: 0;
padding: 0 0.4em 1em 0;
color: white;
font-size: 20px;
font-family: times new roman;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<description>
Full Stack Developer
</description>
<ul class="sidebar">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>
My Projects
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-question-circle"></i>
<span>Nothing</span>
</a>
</li>
<li>
<a>
<i class="fa fa-square"></i>
<span>Boxes for all</span>
</a>
</li>
<li>
<a>
<i class="fa fa-th-large"></i>
<span>More boxes</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-info-circle"></i>
<span>
About
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-eye"></i>
<span>I have eyes</span>
</a>
</li>
<li>
<a>
<i class="fa fa-bed"></i>
<span>and a bed</span>
</a>
</li>
<li>
<a>
<i class="fa fa-heartbeat"></i>
<span>plus cool icons</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-globe">
</i>
<span>
Links
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-external-link"></i>
<span>No Links</span>
</a>
</li>
<li>
<a>
<i class="fa fa-fire"></i>
<span>For the wicked</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-envelope-o"></i>
<span>
Contact
</span>
</a>
<ul>
<li>
<a href="mailto:alec.menke#gmail.com">
<i class="fa fa-user"></i>
<span style="font-size: 8px;">alec.menke#gmail.com</span>
</a>
</li>
</ul>
</li>
</ul>
Code Pen
The problem wasn't the vendor prefixes for transforms and transition. The problem was z-index: -1 property. By definition, element with absolute position should be on top of all the elements positioned inline or relative. The trick with -1 worked and placed it below the parent menu element which has position relative. However, in Firefox and IE it was placed even below the body, so when the mouse hovers on dropped menu in fact in hovers on body, i.e. out of the parent menu <li> element.
To solve this problem I made the changes:
In the ul.sidebar > li > a class changed z-index to 1, and added the following properties to the ul.sidebar > li > a class:
position: absolute;
left: 0;
background: #aa2266;
z-index: 1;
I've checked the result on Firefox and Internet Explorer and now it works fine :)
ul.sidebar {
display: block;
position: absolute;
margin: 0;
left: 0;
height: 100%;
width: 6.5em;
background: #aa2266;
padding: 0;
text-align: center;
}
ul.sidebar * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul.sidebar a {
color: white;
text-decoration: none;
margin: 0;
display: inline-block;
width: 100%;
height: 100%;
}
ul.sidebar a > i {
margin-top: 0.13333em;
font-size: 2em;
display: block;
margin-bottom: 0.2em;
}
ul.sidebar a > span {
font-size: 0.8em;
font-family: sans-serif;
}
ul.sidebar li {
transition: background 0.3s;
background: #aa2266;
}
ul.sidebar > li {
margin: 0;
padding: 0;
height: 4em;
display: inline-block;
position: relative;
width: 100%;
background: #aa2266;
transition: background 0.3s;
}
ul.sidebar > li:hover {
background: #dc3278;
}
ul.sidebar > li:hover:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 6px;
background: linear-gradient(to right, rgba(0, 0, 0, 0.25) 0%, transparent 100%);
}
ul.sidebar > li > a {
position: absolute;
left: 0;
background: #aa2266;
z-index: 1;
transition: background 0.3s;
}
ul.sidebar > li > a:hover {
background: #ff5f87;
}
ul.sidebar > li > ul {
overflow: hidden;
height: 4em;
padding: 0;
position: absolute;
z-index: 0;
margin: 0;
color: red;
left: 100%;
transition-delay: 0.3s;
transition-property: transform;
transition-duration: 0.6s;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
width: auto;
list-style: none;
white-space: nowrap;
top: 0;
background: #dc3278;
}
ul.sidebar > li > ul > li {
overflow: hidden;
background: none;
margin: 0 0px 0 -4px;
padding: 0;
display: inline-block;
width: 6.5em;
height: 4em;
transition: background 0.3s;
}
ul.sidebar > li > ul > li:hover {
background: #fa648c;
}
ul.sidebar li:hover > ul {
-webkit-transform: translateX(0);
transform: translateX(0);
}
ul.sidebar li:hover > ul > li {
color: white;
}
body {
padding: 0;
position: fixed;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #450f30;
}
description {
position: absolute;
bottom: 0;
right: 0;
padding: 0 0.4em 1em 0;
color: white;
font-size: 20px;
font-family: times new roman;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<description>
Full Stack Developer
</description>
<ul class="sidebar">
<li>
<a href="#">
<i class="fa fa-home"></i>
<span>
My Projects
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-question-circle"></i>
<span>Nothing</span>
</a>
</li>
<li>
<a>
<i class="fa fa-square"></i>
<span>Boxes for all</span>
</a>
</li>
<li>
<a>
<i class="fa fa-th-large"></i>
<span>More boxes</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-info-circle"></i>
<span>
About
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-eye"></i>
<span>I have eyes</span>
</a>
</li>
<li>
<a>
<i class="fa fa-bed"></i>
<span>and a bed</span>
</a>
</li>
<li>
<a>
<i class="fa fa-heartbeat"></i>
<span>plus cool icons</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-globe">
</i>
<span>
Links
</span>
</a>
<ul>
<li>
<a>
<i class="fa fa-external-link"></i>
<span>No Links</span>
</a>
</li>
<li>
<a>
<i class="fa fa-fire"></i>
<span>For the wicked</span>
</a>
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-envelope-o"></i>
<span>
Contact
</span>
</a>
<ul>
<li>
<a href="mailto:alec.menke#gmail.com">
<i class="fa fa-user"></i>
<span style="font-size: 8px;">alec.menke#gmail.com</span>
</a>
</li>
</ul>
</li>
</ul>