I am making a nested html menu. And for some reason, the hover keeps triggering way before you actually hover on the correct element. It's as if another div or element is triggering it before hand.
I think it has to do with my HTML structure and the way I am calling the hover in css.
See snippets below -
/*CAR ASSISTANT STYLES*/
.car-assist-container {
position: relative;
float: left;
width: 210px;
}
.assist-label {
display: block;
font-size: 1em;
float: left;
padding: 7px;
text-transform: uppercase;
color: black;
}
.assist-label:hover > .assist-list {
opacity: 1;
height: auto;
}
.assist-list {
width: 100px;
background-color: #141825;
height: 0;
opacity: 0;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
display: block;
}
.assist-item{
color: white;
display: block;
width: 100%;
padding: 8px;
border-bottom: 1px solid #1d2435;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
cursor: pointer;
-webkit-transition: color 0.4s ease;
-moz-transition: color 0.4s ease;
-o-transition: color 0.4s ease;
transition: ocolor 0.4s ease;
}
.assist-item:hover {
color: #d40000;
}
.browse:after {
content: '▸';
}
.browse:hover > .browse-list{
opacity: 1;
}
.browse-list{
position: absolute;
right: 0;
width: 100px;
background-color: #1d2435;
top: 0;
opacity: 0;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
z-index: -1;
}
.browse-item{
color: white;
display: block;
width: 100%;
padding: 8px;
border-bottom: 1px solid #141825;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
}
.browse-item:hover {
color: #d40000;
}
<div class="car-assist-container">
<a href="#" class="assist-label" id="label">Car Assistant
<ul class="assist-list">
<li class="assist-item" id="carWorth">Car Worth</li>
<li class="assist-item browse">
Browse
<ul class="browse-list">
<li class="browse-item" id="browseMake">Makes</li>
<li class="browse-item" id="browseType">Types</li>
<li class="browse-item" id="browseYear">Year</li>
</ul>
</li>
<li class="assist-item">Compare</li>
</ul>
</a>
</div>
This is probably your desired behaviour, with minimal code change.
/*CAR ASSISTANT STYLES*/
.car-assist-container {
position: relative;
float: left;
width: 210px;
}
.assist-label {
display: block;
font-size: 1em;
float: left;
padding: 7px;
text-transform: uppercase;
color: black;
}
.assist-label:hover > .assist-list {
opacity: 1;
height: auto;
}
.assist-list {
width: 100px;
background-color: #141825;
height: 0;
opacity: 0;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
display: block;
overflow: hidden;
margin: 0;
}
.assist-item{
color: white;
display: block;
width: 100%;
padding: 8px;
border-bottom: 1px solid #1d2435;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
cursor: pointer;
-webkit-transition: color 0.4s ease;
-moz-transition: color 0.4s ease;
-o-transition: color 0.4s ease;
transition: ocolor 0.4s ease;
}
.assist-item:hover {
color: #d40000;
}
.browse:after {
content: '▸';
}
.browse:hover > .browse-list{
opacity: 1;
height: auto;
}
.browse-list{
position: absolute;
right: 0;
width: 100px;
background-color: #1d2435;
top: 0;
opacity: 0;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
z-index: 1;
height: 0;
overflow: hidden;
}
.browse-item{
color: white;
display: block;
width: 100%;
padding: 8px;
border-bottom: 1px solid #141825;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
}
.browse-item:hover {
color: #d40000;
}
<div class="car-assist-container">
<a href="#" class="assist-label" id="label">Car Assistant
<ul class="assist-list">
<li class="assist-item" id="carWorth">Car Worth</li>
<li class="assist-item browse">
Browse
<ul class="browse-list">
<li class="browse-item" id="browseMake">Makes</li>
<li class="browse-item" id="browseType">Types</li>
<li class="browse-item" id="browseYear">Year</li>
</ul>
</li>
<li class="assist-item">Compare</li>
</ul>
</a>
</div>
You're animating the opacity, I've changed it from display: block; to display: none; and we're switching those values now on hover. Seems to trigger at the right moment now. However you're submenu is still not working correctly but I did not look into that as that was not the question ;-)
/*CAR ASSISTANT STYLES*/
.car-assist-container {
position: relative;
float: left;
width: 210px;
}
.assist-label {
display: block;
font-size: 1em;
float: left;
padding: 7px;
text-transform: uppercase;
color: black;
}
.assist-label:hover > .assist-list {
opacity: 1;
height: auto;
display:block;
}
.assist-list {
width: 100px;
background-color: #141825;
height: 0;
opacity: 0;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
display: none;
}
.assist-item{
color: white;
display: block;
width: 100%;
padding: 8px;
border-bottom: 1px solid #1d2435;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
cursor: pointer;
-webkit-transition: color 0.4s ease;
-moz-transition: color 0.4s ease;
-o-transition: color 0.4s ease;
transition: ocolor 0.4s ease;
}
.assist-item:hover {
color: #d40000;
}
.browse:after {
content: '▸';
}
.browse:hover > .browse-list{
opacity: 1;
display:block;
}
.browse-list{
position: absolute;
right: 0;
width: 100px;
background-color: #1d2435;
top: 0;
opacity: 0;
display:none;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
-o-transition: opacity 0.4s ease;
transition: opacity 0.4s ease;
z-index: -1;
}
.browse-item{
color: white;
display: block;
width: 100%;
padding: 8px;
border-bottom: 1px solid #141825;
font-family: 'Montserrat', sans-serif;
font-weight: 100;
}
.browse-item:hover {
color: #d40000;
}
<div class="car-assist-container">
<a href="#" class="assist-label" id="label">Car Assistant
<ul class="assist-list">
<li class="assist-item" id="carWorth">Car Worth</li>
<li class="assist-item browse">
Browse
<ul class="browse-list">
<li class="browse-item" id="browseMake">Makes</li>
<li class="browse-item" id="browseType">Types</li>
<li class="browse-item" id="browseYear">Year</li>
</ul>
</li>
<li class="assist-item">Compare</li>
</ul>
</a>
</div>
That is because your .browse-list div is on the top of your .assist-label, so when you hover over the .assist-label, your are actually hovering over .browse-list.
Related
I am working on a website with some friends for fun and we are having an issue with the nav menu not showing up after we press the button, I had to use flexbox to align my hamburger menu to the navbar originally, but now when we press it, it isnt showing any of the sub menus at all.
Yes, we realize that webkit is for scss, it was just there for examples
.topnav {
flex-grow: 1;
max-height: 100px;
}
.navbarItems a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 24px;
}
.navbarItems a:hover {
background-color: darkgray;
color: black;
}
.navbarItems a.active {
background-color: white;
color: white;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
background-color: grey;
}
/* Hambuger Menu */
.burger {
background: none;
outline: 0;
cursor: pointer;
border-top: 4px solid currentColor;
width: 28px;
transition: border-top 0.1s ease-in-out;
-webkit-transition: border-top 0.1s ease-in-out;
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-top: 4px solid currentColor;
width: 100%;
margin-top: 5px;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger:after {
content: "";
display: block;
border-top: 4px solid currentColor;
width: 100%;
margin-top: 5px;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
position: relative;
align-self: center;
}
.burger-check {
display: none;
}
.burger-check:checked ~ .burger {
border-top: 4px solid transparent;
transition: border-top 0.5s ease-in-out;
-webkit-transition: border-top 0.5s ease-in-out;
}
.burger-check:checked ~ .burger:before {
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
align-self: center;
}
.burger-check:checked ~ .burger:after {
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.navigation {
overflow: hidden;
background-color: black;
max-height: 0;
-webkit-transition: max-height 0.5s ease-in-out;
transition: max-height 1.5s ease-in-out;
}
.burger-check:checked ~ .navigation{
overflow: visible;
background-color: purple;
max-height: 100%;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
p {
background-color: floralwhite;
font-family: 'Libre Baskerville', serif;
font-size: 30px;
text-align: center;
}
body {
background-color: floralwhite;
font-family: 'Libre Baskerville', serif;
font-size: 30px;
text-align: centeR;
}
h1 {
font-family: 'Libre Baskerville', serif;
font-style: italic;
text-align: center;
}
a {
color: inherit;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
font-size: 25px;
padding: 5px 0;
}
li a {
text-decoration: none;
}
li a:hover {
text-decoration: underline;
}
.img {
width:1000px;
height:400px;
}
.header {
width: 322px;
height: 219px;
}
h4 {
font-family: 'Libre Baskerville', serif;
text-align: center;
list-style: square;
}
<div class="topnav" id="myTopnav">
<div class="navbarItems">
Home
About
</div>
</div>
<input class="burger-check" id="burger-check" type="checkbox">
<label for="burger-check" class="burger"></label>
</div>
<nav id="navigation1" class="navigation">
<ul>
<li><h1>Professional Awards</h1></li>
<li>Advisor of the Year Award</li>
<li>Emerging Advisor of the Year Award</li>
<li>Emerging Professional of the Year Award</li>
<li>Hall of Fame Award</li>
<li>Outstanding Service Award</li>
<li>Student of the Year</li>
<li><h1>Service Learning Awards</h1></li>
<li>Community Service Award</li>
<li>Environmental Action Awareness</li>
<li>Safety Awareness Award</li>
<li>Service Learning Individual Award</li>
<li>Special Olympics Award</li>
<li><h1>Special Recognition Awards</h1></li>
<li>BPA Marketing and Public Relations</li>
<li>BPA Merit Scholar</li>
<li>Chapter Activities Award of Excellence</li>
<li>Membership Explosion Award</li>
<li>Recruiter of the Year Award</li>
<li>Social Media Award</li>
<li>The Professional Cup</li>
</ul>
</nav>
I'm trying to make a menu which is horizontal on screen and vertical on phone.
Though on phone the li is stacked over each other instead of above each other.
I have tried to change "position:absolute" but this makes my menu disappear.
Is there a way to work around this?
.menubar {
display: flex;
justify-content: space-between;
width: 86.3vw;
}
.menurow {
position: fixed;
left: 1.52vw;
bottom: -0.9vh;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
h3 {
position: absolute;
border: none;
background-color: transparent;
padding-bottom: 1vh;
color: black;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 1.8vw;
text-transform: uppercase;
cursor: pointer;
display: inline-block;
bottom: 0vh;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
h3:hover {
bottom: 1.5vw;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.navigationmobile {
visibility: hidden;
}
/* phone */
#media(max-width: 480px) {
.menurow,
#contact,
#salaris,
#personeel {
visibility: hidden;
}
.navigationmobile {
visibility: visible;
z-index: 100;
}
.navigationmobile ul {
margin: 0;
padding: 2;
width: 500px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
h3 {
border: none;
left: 1.65vw;
background-color: transparent;
padding-bottom: 1vh;
color: black;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 1.8vw;
text-transform: uppercase;
cursor: pointer;
display: inline-block;
bottom: 0vh;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
}
<div class="menurow">
<ul class="menubar">
<li>
<h3 class="mobile-menu" data-menu="menu-1">Boekhouding</h3>
</li>
<li>
<h3 class="mobile-menu" data-menu="menu-2" id="salaris">Salarisadministratie</h3>
</li>
<li>
<h3 class="mobile-menu" data-menu="menu-3">Debiteurenbeheer</h3>
</li>
<li>
<h3 class="mobile-menu" data-menu="menu-4" id="personeel">Personeelszaken</h3>
</li>
<li>
<h3 class="mobile-menu" data-menu="menu-5">Mediation</h3>
</li>
</ul>
</div>
<div class="navigationmobile"><u>
<li><h3 class="mobile-menu" data-menu="menu-1">Boekhouding</h3></li>
<li><h3 class="mobile-menu" data-menu="menu-2">Salarisadministratie</h3></li>
<li><h3 class="mobile-menu" data-menu="menu-3">Debiteurenbeheer</h3></li>
<li><h3 class="mobile-menu" data-menu="menu-4">Personeelszaken</h3></li>
<li><h3 class="mobile-menu" data-menu="menu-5">Mediation</h3></li>
<li><h3 class="mobile-menu" data-menu="menu-6">Contact</h3></li>
</u></div>
Remove position: absolute; bottom: 0vh; from h3. That's keeping the li's from having the expected layout on the page since an absolute position removes an element from the normal flow.
.menubar {
display: flex;
justify-content: space-between;
width: 86.3vw;
}
.menurow {
position: fixed;
left: 1.52vw;
bottom: -0.9vh;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
h3 {
border: none;
background-color: transparent;
padding-bottom: 1vh;
color: black;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 1.8vw;
text-transform: uppercase;
cursor: pointer;
display: inline-block;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
h3:hover {
bottom: 1.5vw;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.navigationmobile {
visibility: hidden;
}
/* phone */
#media(max-width: 480px) {
.menurow,
#contact,
#salaris,
#personeel {
visibility: hidden;
}
.navigationmobile {
visibility: visible;
z-index: 100;
}
.navigationmobile ul {
margin: 0;
padding: 2;
width: 500px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
h3 {
border: none;
left: 1.65vw;
background-color: transparent;
padding-bottom: 1vh;
color: black;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
font-size: 1.8vw;
text-transform: uppercase;
cursor: pointer;
display: inline-block;
bottom: 0vh;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
}
<div class="menurow">
<ul class="menubar">
<li>
<h3 class="mobile-menu" data-menu="menu-1">Boekhouding</h3>
</li>
<li>
<h3 class="mobile-menu" data-menu="menu-2" id="salaris">Salarisadministratie</h3>
</li>
<li>
<h3 class="mobile-menu" data-menu="menu-3">Debiteurenbeheer</h3>
</li>
<li>
<h3 class="mobile-menu" data-menu="menu-4" id="personeel">Personeelszaken</h3>
</li>
<li>
<h3 class="mobile-menu" data-menu="menu-5">Mediation</h3>
</li>
</ul>
</div>
<div class="navigationmobile"><u>
<li><h3 class="mobile-menu" data-menu="menu-1">Boekhouding</h3></li>
<li><h3 class="mobile-menu" data-menu="menu-2">Salarisadministratie</h3></li>
<li><h3 class="mobile-menu" data-menu="menu-3">Debiteurenbeheer</h3></li>
<li><h3 class="mobile-menu" data-menu="menu-4">Personeelszaken</h3></li>
<li><h3 class="mobile-menu" data-menu="menu-5">Mediation</h3></li>
<li><h3 class="mobile-menu" data-menu="menu-6">Contact</h3></li>
</u></div>
I have a footer with content in it. Problem I'm having is the content is displaying vertically instead of horizontally.
I've tried using float:right; that hasn't changed anything. Would really appreciate some help.
Also two of the three social icons aren't showing up. That might be because of the float issue though...
Here's my code
<div class="footer-grid">
<h3>More</h3>
<ul>
<li>FAQ</li>
<li>Privacy Policy</li>
<li>Terms and Conditions</li>
</ul>
</div>
<div class="footer-grid">
<h3>Connect With Us</h3>
<ul class="social-icons">
<li>
<a class="facebook" href="#"> </a>
</li>
<li>
<a class="pinterest" href="#"> </a>
</li>
<li>
<a class="twitter" href="#"> </a>
</li>
</ul>
<p class="copy-right">Website by Elevate design</p>
</div>
Css:
.footer-grid {
min-width: 100%;
float: left;
background-color: #414141;
}
.footer-grid:nth-child(3n+1) {
margin-right: 0;
}
.footer-grid h3 {
color: #3D3D3D;
float: right;
font-size: 14px;
font-family: 'arial';
margin-bottom: 0.8em;
}
.footer-grid ul li {}
.footer-grid ul li a {
color: #8C8C8C;
font-size: 14px;
transition: 0.5s all;
margin-right: 10px;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.footer-grid ul li a:hover {
zoom: 1;
filter: alpha(opacity=75);
opacity: 0.7;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
}
.social-icons li {
display: inline-block;
}
.social-icons li a {
width: 72px;
height: 72px;
display: block;
}
.social-icons li a.facebook {
background: url(../images/facebook_icon.png) no-repeat 0px 0px;
}
.social-icons li a.twitter {
background: url(../images/twitter_.png) no-repeat -56px 0px;
}
.social-icons li a.pinterest {
background: url(../images/pinterest.png) no-repeat -112px 0px;
}
.footer-grid p {
color: #A2A2A2;
font-size: 14px;
line-height: 1.5em;
padding: 0 0 0.4em 0;
}
.footer-grid input[type="text"] {
width: 84%;
margin: 0.4em 0 1em;
padding: 0.8em;
border: 1px solid #C3C3C3;
transition: border-color 0.5s all;
-webkit-transition: border-color 0.5s all;
-moz-transition: border-color 0.5s all;
-o-transition: border-color 0.5s all;
font-family: 'open_sanssemibold';
color: #3D3D3D;
outline: none;
border-radius: 0.5em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-o-border-radius: 0.5em;
}
.footer-grid input[type="text"]:hover {
border: 1px solid #999;
}
.footer-grid input[type="submit"] {
background: #F36EA7;
padding: 0.8em;
display: block;
width: 100%;
font-family: 'arial';
color: #FFF;
border: none;
font-size: 14px;
border-radius: 0.3em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
-o-border-radius: 0.3em;
outline: none;
cursor: pointer;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.footer-grid input[type="submit"]:hover {
background: #EE639F;
}
.footer-grids {
padding: 3em 0 5em;
}
.copy-right {
margin-top: 1em;
}
.copy-right a {
color: #A2A2A2;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.copy-right a:hover {
color: #F36EA7;
}
you forgot to put display:inline-block in .footer-grid ul li
.footer-grid ul li{
display:inline-block;
}
I have an ul li structure that give me one fly out that is it gives me sub-menu but i want one more sub-menu on hover first sub-menu.
following is the structure
My Css
.main-navi li{
position: relative;
}
.main-navi li div,
.main-navi a{
display: block;
line-height: 80px;
text-transform: uppercase;
font-weight: 900;
padding-left: 30px;
color: #999;
border-bottom: 1px solid #FFFFFF;
position: relative;
z-index: 1;
background: #3a5795;
cursor: pointer;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div{
padding-left: 0;
border: none;
}
.main-navi li div{
position: relative;
z-index: 1;
background: #1A1A1A;
padding-left: 30px;
border-bottom: 1px solid #212121;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi a.active:hover,
.main-navi a.active{
padding-left: 50px;
color: #fff;
background: #ff3333;
cursor: default;
}
.main-navi .dot{
width: 10px;
height: 10px;
position: absolute;
top: 50%;
margin-top: -5px;
right: 30px;
background: #333;
border-radius: 50%;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div .corner,
.main-navi a .corner{
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
opacity: 0;
z-index: -1;
border-top: 40px solid transparent;
border-left: 20px solid #1A1A1A;
border-bottom: 40px solid transparent;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi li div.active .corner,
.main-navi a.active .corner{
right: -20px;
opacity: 1;
border-left: 20px solid #ff3333;
}
.main-navi a.active:hover .dot,
.main-navi a.active .dot{
background: #fff;
}
.main-navi li div:hover,
.main-navi a:hover{
padding-left: 50px;
color: #fff;
background: #151515;
}
.main-navi li div.active{
padding-left: 50px;
background: #ff3333;
color: #fff;
}
.main-navi li div:hover .dot,
.main-navi a:hover .dot{
background: #ff3333;
}
.main-navi li div.active .dot{
background: #fff;
}
.drop-down {
left: 0;
overflow-y: scroll;
position: absolute;
top: -0;
width: 250px;
height:480px;
z-index: -2;
background: #151515;
opacity: 0;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
::-webkit-scrollbar
{
width: 5px;
}
::-webkit-scrollbar-track
{
background-color: #ff3333;
}
::-webkit-scrollbar-thumb
{
background-color: #ffffff;
}
::-webkit-scrollbar-button
{
background-color: #000000;
}
::-webkit-scrollbar-corner
{
background-color: black;
}
.main-navi li:hover .drop-down{
left: 100%;
opacity: 1;
}
.active .drop-down{
overflow: visible;
}
.main-navi .drop-down a{
background: #3a5795;
border-bottom: 1px solid #ffffff;
line-height: 40px;
}
.main-navi .drop-down a:hover{
padding-left: 40px;
}
<!-- code i created to get sub of sub menu-->
.drop-down-in {
left: 100;
overflow-y: scroll;
position: absolute;
top: -0;
width: 250px;
height:480px;
z-index: -2;
background: #151515;
opacity: 1;
-moz-transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.main-navi .drop-down li:hover .drop-down-in{
left: 200%;
opacity: 1;
}
.active .drop-down-in{
overflow: visible;
}
.main-navi .drop-down .drop-down-in a{
background: #3a5795;
border-bottom: 1px solid #ffffff;
line-height: 40px;
}
.main-navi .drop-down .drop-down-in a:hover{
padding-left: 40px;
}
<!--ends here-->
this is css that contains code for both sub and sub inside sub-menu. class drop-down works fine i want one more sub-menu so i created class drop-down-in which is not working.
My html code is:
<ul>
<li>Home<span class="dot"></span><span class="corner"></span></li>
<li> About<span class="dot"></span><span class="corner"></span></li>
<li>Products And Services<span class="dot"></span><span class="corner"></span>
<ul class="drop-down">
<li>Calenders
<ul class="drop-down-in">
<li>Calenders</li>
<li>Clock Printing</li>
<li>key</li>
<li>Menu Cards</li>
</ul>
</li>
<li>Clock Printing</li>
</ul>
Here is a Fiddle to my question.
You forgot to add the class attribute with the value "main-navi" to your first "ul" element.
<ul class="main-navi">
<li>Home<span class="dot"></span><span class="corner"></span></li>
<li> About<span class="dot"></span><span class="corner"></span></li>
<li>
Products And Services<span class="dot"></span><span class="corner"></span>
<ul class="drop-down">
<li>
Calenders
<ul class="drop-down-in">
<li>Calenders</li>
<li>Clock Printing</li>
<li>key</li>
<li>Menu Cards</li>
</ul>
</li>
<li>Clock Printing</li>
</ul>
</li>
And in CSS you schould update:
.main-navi li:hover .drop-down{
left: 100%;
}
If the value for "left" is 100%, than this element wont be visible.
Here you can find an updated Fiddle.
I want to make a sliding menu using solely CSS. The menu will reveal a list of items and a close button inside it. I currently have an anchor tag on my homepage that is styled correctly, but it does not do anything when clicked.
HTML:
<body class="homepage body-push">
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Focus</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
</body>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
UPDATE: I finally found a way to get it working.
HTML:
<!-- Menu -->
<nav class="menu" id="theMenu">
<div class="menu-wrap">
<h1 class="logo">Menu</h1>
<i class="icon-remove menu-close"></i>
Home
Services
Process
Portfolio
About
Contact
<i class="icon-facebook"></i>
<i class="icon-twitter"></i>
<i class="icon-dribbble"></i>
<i class="icon-envelope"></i>
</div>
<!-- Menu button -->
<div id="menuToggle"><i class="icon-reorder"></i></div>
</nav>
CSS:
.menu {
position: fixed;
right: -200px;
width: 260px;
height: 100%;
top: 0;
z-index: 10;
text-align: left;
}
.menu.menu-open {
right: 0px;
}
.menu-wrap {
position: absolute;
top: 0;
left: 60px;
background: #1a1a1a;
width: 200px;
height: 100%;
}
.menu h1.logo a {
font-family: 'Raleway', Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 800;
letter-spacing: 0.15em;
line-height: 40px;
text-transform: uppercase;
color: #ffffff;
margin-top: 20px;
}
.menu h1.logo a:hover {
color: #f85c37;
}
.menu img.logo {
margin: 20px 0;
max-width: 160px;
}
.menu a {
margin-left: 20px;
color: #808080;
display: block;
font-size: 12px;
font-weight: 700;
line-height: 40px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.menu a:hover {
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
.menu a > i {
float: left;
display: inline-block;
vertical-align: middle;
text-align: left;
width: 25px;
font-size: 14px;
line-height: 40px;
margin: 25px 2px;
}
.menu-close {
cursor: pointer;
display: block;
position: absolute;
font-size: 14px;
color: #808080;
width: 40px;
height: 40px;
line-height: 40px;
top: 20px;
right: 5px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.menu-close:hover {
color: #ffffff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
/* Push the body after clicking the menu button */
.body-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.body-push-toright {
left: 200px;
}
.body-push-toleft {
left: -200px;
}
.menu,
.body-push {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#menuToggle {
position: absolute;
top: 20px;
left: 0;
z-index: 11;
display: block;
text-align: center;
font-size: 14px;
color: #ffffff;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
background: rgba(0,0,0,0.25);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menuToggle:hover {
color: #ffffff;
background: rgba(0,0,0,0.2);
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
Javascript:
// Menu settings
$('#menuToggle, .menu-close').on('click', function(){
$('#menuToggle').toggleClass('active');
$('body').toggleClass('body-push-toleft');
$('#theMenu').toggleClass('menu-open');
});
// Scrollable menu on small devices
$(window).bind("load resize", function(){
if($(window).height() < 400){
$(".menu").css("overflow-y","scroll");
}
else {
$(".menu").css("overflow-y","hidden");
}
});
I would recommend reading this: http://www.sitepoint.com/css3-sliding-menu/
If the article is TL;DR then use
/* Revealing 3D Menu CSS */
body
{
font-family: sans-serif;
font-size: 100%;
padding: 0;
margin: 0;
color: #333;
background-color: #221;
}
/* main page */
article
{
position: fixed;
width: 70%;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding: 30px 15%;
background-color: #fff;
overflow: auto;
z-index: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
}
article:after
{
position: absolute;
content: ' ';
left: 100%;
top: 0;
right: 0;
bottom: 0;
background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -ms-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
background-image: linear-gradient(right, rgba(0,0,0,0.2) 0%, transparent 100%);
pointer-events: none;
}
/* navigation */
nav
{
position: fixed;
left: -16em;
top: 0;
bottom: 0;
background-color: #654;
border-right: 50px solid #765;
box-shadow: 4px 0 5px rgba(0,0,0,0.2);
z-index: 1;
cursor: pointer;
}
nav:after
{
position: absolute;
content: ' ';
width: 0;
height: 0;
right: -70px;
top: 50%;
border-width: 15px 10px;
border-style: solid;
border-color: transparent transparent transparent #765;
}
nav ul
{
width: 14em;
list-style-type: none;
margin: 0;
padding: 1em;
}
nav a:link, nav a:visited
{
display: block;
width: 100%;
font-weight: bold;
line-height: 2.5em;
text-indent: 10px;
text-decoration: none;
color: #ffc;
border-radius: 4px;
outline: 0 none;
}
nav a:hover, nav a:focus
{
color: #fff;
background-color: #543;
text-shadow: 0 0 4px #fff;
box-shadow: inset 0 2px 2px rgba(0,0,0,0.2);
}
/* hovering */
article, article:after, nav, nav *
{
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
nav:hover
{
left: 0;
}
nav:hover ~ article
{
-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
transform: translateX(16em) perspective(600px) rotateY(10deg);
}
nav:hover ~ article:after
{
left: 60%;
}
This can be used to create a 3d sliding menu as seen here