Button for overlay menu disappears when menu is opened

Button for overlay menu disappears when menu is opened - javascript

When I place my menu button inside my header div and open the menu, the close button disappears. This happens after the overlay on the screen. I have tried to fix this with the z-index but nothing changes. I can only see the open button when the menu is closed inside the header. The close menu button shows when the button is not placed inside a header div.
$(document).ready(function(){
$(".button a").click(function(){
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
});
});
$('.overlay').on('click', function(){
$(".overlay").fadeToggle(200);
$(".button a").toggleClass('btn-open').toggleClass('btn-close');
open = false;
});
#charset "UTF-8";
ul {
margin:0;
padding:0;
text-decoration:none;
list-style:none;
}
li {
padding:0;
margin:0;
}
/*styling open close button*/
.button {
padding:10px;
display:inline;
position:fixed;
right:50px;
top:6px;
z-index:999;
font-size:30px;
}
.button a {
text-decoration:none;
}
.btn-open:after {
color:#071914;
content:"\f0c9";
font-family:"FontAwesome";
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.btn-open:hover:after {
color:#fafd23;
}
.btn-close:after {
color:#071914;
content:"\f00d";
font-family:"FontAwesome";
z-index:100;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.btn-close:hover:after {
color: #fafd23;
}
/*overlay*/
.overlay {
display:none;
position:fixed;
top:0;
height:100%;
width:100%;
background:#FFF;
overflow:auto;
z-index:99;
}
/** SOCIAL ICON **/
.wrap {
color:#f2f2f2;
text-align:center;
max-width:90%;
margin:0 auto;
}
.wrap ul.wrap-nav {
border-bottom:1px solid #071914;
text-transform:capitalize;
padding:100px 0px 50px;
}
.wrap ul.wrap-nav li {
font-size:1.7em;
display:inline-block;
vertical-align:top;
width:24%;
position:relative;
}
.wrap ul.wrap-nav li a {
color:#071914;
display:block;
padding:8px 0;
text-decoration:none;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.wrap-nav h1{
color:#071914;
font-family:'spinweradbold';
text-transform:uppercase;
letter-spacing:1px;
}
.wrap ul.wrap-nav ul {
padding:20px 0;
}
.wrap ul.wrap-nav ul li {
display:block;
font-size:.7em;
width:100%;
color:#e9e9e9;
}
.wrap ul.wrap-nav ul li a {
color:#071914;
}
.wrap ul.wrap-nav ul li a:hover {
color:#6dd7d7;
}
.social {
font-size:25px;
padding:20px;
}
.social p {
margin:0;
padding:20px 0 5px 0;
line-height:30px;
font-size:13px;
}
.social-icon {
width:80px;
height:50px;
background:#071914;
color:#fff;
display:inline-block;
margin:0 20px;
transition-property:all .2s linear 0s;
-moz-transition:all .2s linear 0s;
-webkit-transition:all .2s linear 0s;
-o-transition:all .2s linear 0s;
}
.social-icon:hover {
background:#6dd7d7;
color:#FFF;
}
.social-icon i {
margin-top:12px;
}
.content {
width:100%;
margin-top:200px;
font-size:20px;
color#333;
text-align: center;
}
#media screen and (max-width:48em) {
.button{
margin-top:15px;
margin-right:-30px;
}
.wrap ul.wrap-nav>li {
width:100%;
padding:20px 0;
border-bottom:1px solid #6dd7d7;
}
.wrap ul.wrap-nav {
padding:30px 0px 0px;
}
nav ul {
opacity:0;
visibility:hidden;
}
.social {
color:#c1c1c1;
font-size:25px;
padding:15px 0;
}
.social-icon {
width:100%;
height:50px;
background:#fff;
color:#333;
display:block;
margin:5px 0;
}
.social p {
margin:0;
padding:20px 0 5px 0;
line-height:30px;
font-size:5px;
}
}
<div class="header-section">
<div class="logo">
<a class="logo-img" href="#home"><img src="images/logo.png"></a>
</div>
<div class="button">
<a class="btn-open" href="#current"></a>
</div>
</div><!--end of header-->
<div class="overlay">
<div class="wrap">
<ul class="wrap-nav">
<li><h1>main</h1>
<ul>
<li>Welcome</li>
<li>Biography</li>
<li>Contact Me</li>
</ul>
</li>
<li><h1>web</h1>
<ul>
<li>Ad Designs</li>
<li>Web Design</li>
<li>Mockups</li>
<li>Wireframes</li>
</ul>
</li>
<li><h1>graphic</h1>
<ul>
<li>Logo Design</li>
<li>Typography</li>
<li>Color Theory</li>
</ul>
</li>
<li><h1>illustration</h1>
<ul>
<li>Illustrations</li>
</ul>
</li>
</ul>
<div class="social">
<a href="http://linkedin.com/in/natishacorona" target="_blank">
<div class="social-icon">
<i class="fa fa-linkedin"></i>
</div>
</a>
<a href="https://twitter.com/GAN_N" target="_blank">
<div class="social-icon">
<i class="fa fa-twitter"></i>
</div>
</a>
</div>
</div>
</div>
</div><!--header-main-->

Related

Arrow turning 180deg when clicking on dropdown menu

I have a dropdown menu and want the arrow on the right of it to turn 180deg when I click on it! The problem is I've set the arrow in the html and not in the javascript.. But I thought there was maybe a way to put it in the css when going from #navi to #navigation..
Here's my code
<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navigation").slideToggle(500);
});
});
</script>
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<div id="navigation">
<div id="navigationin">
Sorry I can't seem to make it work.. Thank you for any help you can give!
(if you want the actual exemple it's on www.typhotoshop.tumblr.com in the left hovering bar)

All you have to do is , adding css3 transition on your arrow , and adding/removing a custom class to this last to rotate 180° , in which the transition is triggered.
#navi .fa-chevron-down {
transition: all 0.5s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
add in js the toggleclass when click on navi
$("#navi .fa-chevron-down").toggleClass("rtoate180");
bellow working snippet :
$(document).ready(function(){
$("#navi").click(function(){
$("#navi .fa-chevron-down").toggleClass("rtoate180");
$("#navigation").stop().slideToggle(500);
});
});
#navi .fa-chevron-down {
transition: all 0.5s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navi"> NAVIGATION
<i class="fa fa-chevron-down"></i>
</div>
<div id="navigation">
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</div>
<div id="navigationin"></div>

you can use css to do your desire output as well
margin-top: 100px;
transform: rotateY(180deg);

<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navigation").slideToggle(500);
});
});
</script>
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a{
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
<div id="navigation"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<div id="navigation">
<div id="navigationin">

Click not possible after applying js function

I'm sorry this is going to be confusing, I have applied a js function to a div of a sidebar so when you click another bar slides from the left. But it used to work with the hover css function. The thing is on the sliding sidebar there are a few menus you can click. Now that I've changed the way the bar slides (with css), you can't click on them anymore.
My code is down there but the snippet isn't looking good at all because the dimensions are wrong I guess.. Sorry but you can see what it looks like here
function myFunction(x) {
x.classList.toggle("change");
}
<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navi .fa-chevron-down").toggleClass("rtoate180");
$("#navigation").slideToggle(500);
});
});
</script>
#more{
position:fixed;
top:0;
left:0px;
padding:5px;
font-size:20px;
line-height:40px;
text-align:center;
width:60px;
height:40px;
display:inline-block;
{block:IfSidebarRight}
right:0px;
left:auto;
{/block:IfSidebarRight}
}
.bar1, .bar2, .bar3 {
cursor:pointer;
position:relative;
left:18px;
top:25px;
width: 35px;
height: 5px;
background-color:{color:Main icon background};
margin: 6px 0px;
transition: 0.4s;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
-moz-transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
-ms-transform: rotate(-45deg) translate(-9px, 6px) ;
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
-ms-transform: rotate(45deg) translate(-8px, -8px) ;
}
/*------ SIDEBAR -----*/
#sidebar{
width:300px;
height:100%;
margin-left:-300px;
{block:IfSidebarRight}
margin-left:300px;
{/block:IfSidebarRight}
top:0px;
}
.change ~ #sidebar2{
margin-left:365px;
{block:IfSidebarRight}
margin-left:-300px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*------ Narrow sidebar -----*/
#sidebar1{
z-index:10;
position:fixed;
top:0px;
left:0;
width:70px;
height:100%;
background:{color:Narrow sidebar background};
{block:IfSidebarRight}
right:0;
left:auto;
{/block:IfSidebarRight}
}
/*------ Wide sidebar -----*/
#sidebar2{
z-index:0;
position:fixed;
top:0px;
margin-left:65px;
width:220px;
height:100%;
background:{color:Wide sidebar background};
background-image:url({image:Wide sidebar background});
{block:IfWideSidebarBackgroundTransparent}
background:transparent;
{/block:IfWideSidebarBackgroundTransparent}
{block:IfSidebarRight}
margin-left:75px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Avatar */
#avatar {
margin: auto;
margin-top: 65px;
width: 50px;
height: 50px;
border-radius: 60px;
border:0px solid
z-index:10;
}
#avatar img {
width: 100%;
height: 100%;
border-radius: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#avatar img:hover {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
-ms-transform: scale(1.4, 1.4);
-webkit-transform: scale(1.4, 1.4);
transform: scale(1.4, 1.4);
}
/* Description */
#description{
position:relative;
margin-left:20px;
color:{color:Description};
background:{color:Description background};
border:5px solid {color:Description background};
max-height:300px;
padding:10px;
width:150px;
overflow-y:auto;
margin-top:20px;
font-size:13px;
line-height:18px;
}
#description:after{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 57px;
}
/* Search box */
#search{
margin-top:10px;
margin-left:20px;
width:180px;
height:30px;
overflow:hidden;
color:{color:Search};
background:{color:Search box background};
}
#search i{
position:absolute;
margin-left:67px;
margin-top:9px;
color:{color:Search}!important;
font-size:12px;
z-index:1000;
}
/* Navigation */
#navi{
cursor:pointer;
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navi .fa-chevron-down {
transition: all 0.7s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a:hover{
cursor:pointer;
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
/* Social icons */
#socialicons{
margin-top:0px;
}
#socialicons i{
display:inline-block;
color:{color:Navigation link}!important;
margin:5px;
font-size:15px;
}
#socialicons i:hover{
color:{color:Hover}!important;
}
/*----- MAIN CONTAINER -----*/
#container{
position:absolute;
top: 50px;
left:50%;
margin-bottom:10px;
min-height:500px;
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: -o-calc(100% - 100px);
width: calc(100% - 100px);
min-width:610px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index:1;
{block:IfShowHeader}
top: -moz-calc(100% + 50px);
top: -webkit-calc(100% + 50px);
top: -o-calc(100% + 50px);
top: calc(100% + 50px);
{/block:IfShowHeader}
{block:TagPage}
top:50px;
{/block:TagPage}
{block:SearchPage}
top:50px;
{/block:SearchPage}
{block:PermalinkPage}
top:50px;
{/block:PermalinkPage}
}
<div id="more">
<div id="sidebar">
<div id="sidebar1" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div id="avatar"><img src="{image:Avatar}"></div>
</div>
<div id="sidebar2">
<div id="description">
{Description}</div>
<div id="search">
<form action="/search" method="get"><i class="fa fa-search"></i>
<input type="text" name="q" value="SEARCH" style="position:absolute; left:20px; width:160px; height:25px; padding-left:10px; font-family:{select:Body font}; font-size: 12px; background:transparent; border:1px solid transparent; color:{color:Search};"/></form>
</div>
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<!--Navigation-->
<div id="navigation">
<div id="navigationin">
{text:Link One Title}
{text:Link Two Title}
{text:Link Three Title}
{text:Link Four Title}
{text:Link Five Title}
</div>
<!--End navigationin-->
<div id="socialicons">
<center>
<i class="fa fa-facebook-square"></i>
<i class="fa fa-twitter-square"></i>
<i class="fa fa-flickr"></i>
<i class="fa fa-youtube"></i>
</center>
</div>
<!--End socialicons-->
</div>
</div>
<!--End sidebar1-->
</div>
<!--End sidebar-->
</div>
<!--End more-->
Thank you so much if you can help me I know it's not clear.. I'm sorry!

Use the developer tools and check out #container - it's covering your sidebar, so - you can't click what's under it.

how to add image when the checkbox is checked

I'm trying to add an image when the checkbox is checked, I'm trying adicionala to append but could not add someone could help me?
HTML
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}
.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}
.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}
.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}
.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}
.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform:scale(1.0);
-webkit-transform:scale(1.0);
transform:scale(1.0);
}
.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}
.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<div class="hovereffect">
<img class="img-responsive" src="http://placehold.it/350x200" alt="">
<div class="overlay">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary cke">
<input type="checkbox" value="nao"><i class="fa fa-heart"></i>
</label>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script>
$('input[type=checkbox]').change(function(){
if($('input[type=checkbox]:checked') == true){
$("hovereffect").append('<img id="heart" class="img-responsive" src="../images/heart.png">');
return;
}
});
</script>
how do I can do this to add an image of the heart when the checkbox is checked

Your class is hovereffect so jquery syntax will be
$(".hovereffect") instead of
$("hovereffect")

css/html/javascript accordeon menu - display sublist inside parent "square"

I'm pretty new to css and webdesign and I have this idea in mind of creating a navigation in the form of a little "tower" of stacked little squares containing the main menu items. Basically an accordeon menu, but with a litte twist. I want the little squares to grow larger on hover and display a list of submenu items but INSIDE of them.
A picture of what I'm trying to archive is here
Can this be done, I am a little lost ?
I have found some css code on the internet to make an accordeon menu that works nicely (as shown below), but I don't know how to change it to display the sublist inside the parent menu square.
This is probably easy stuff for someone with lots of experience and a stupid question, but I'm kinda stuck :-(. I think the "on hover" also needs to trigger the resizing of the parent item, but how ? Or am I overlooking a very simple solution ?
Thanks alot and sorry for my bad English.
n.
.menu {
margin: 0 auto;
padding: 0;
width: 150px;
}
.menu li {
list-style: none;
}
.menu li a {
display: table;
margin-top: 1px;
height: 90px;
padding: 14px 10px;
width: 90px;
background: #5DB26E;
text-decoration: none;
text-align: left;
vertical-align: middle;
color: #fff;
overflow: hidden;
-webkit-transition-property: background;
-webkit-transition-duration: 0.4s;
-webkit-transition-timing-function: ease-out;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease-out;
}
.menu > li:first-child a {
margin-top: 0;
}
.menu li a:hover {
background: #4AADBB;
-webkit-transition-property: background;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-property: background;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}
.menu li ul {
margin: 0;
padding: 0;
}
.menu li li a {
display: block;
margin-top: 0;
padding: 0 10px;
height: 0;
background: #C6DDD9;
color: #1F3D39;
-webkit-transition-property: all;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}
.menu > li:hover li a {
display: table;
margin-top: 1px;
padding: 10px;
width: 100%;
height: 1em;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
.menu > li:hover li a:hover {
background: #A4CAC8;
-webkit-transition-property: background;
-webkit-transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-property: background;
transition-duration: 0.2s;
transition-timing-function: ease-out;
}

How about something like this?
You'd probably want to replace the headers with anchor tags for wherever your nav links link to.
ul {
padding:0;
margin:0;
}
li {
box-sizing:border-box;
padding:0;
margin:0;
list-style:none;
}
ul.menu > li {
overflow:hidden;
width:47px;
max-height:47px;
padding:10px;
margin-bottom:10px;
background:blue;
color:white;
cursor:pointer;
transition:all 1s ease;
}
ul.menu > li:hover {
width:100px;
max-height:120px;
}
h2 {
margin:0 0 10px 0;
}
h3 {
margin:0;
}
<ul class="menu">
<li>
<h2>A</h2>
<ul>
<li>
<h3>A.a</h3>
<h3>A.b</h3>
<h3>A.c</h3>
</li>
</ul>
</li>
<li>
<h2>B</h2>
<ul>
<li>
<h3>B.a</h3>
<h3>B.b</h3>
<h3>B.c</h3>
</li>
</ul>
</li>
<li>
<h2>C</h2>
<ul>
<li>
<h3>C.a</h3>
<h3>C.b</h3>
<h3>C.c</h3>
</li>
</ul>
</li>
<li>
<h2>D</h2>
<ul>
<li>
<h3>D.a</h3>
<h3>D.b</h3>
<h3>D.c</h3>
</li>
</ul>
</li>
</ul>

my solution is as seen below (for everyone who is faced with the same problem)
#hideme{display:none;}
.menu ul {
padding:0;
margin:0;
color:white;
text-decoration:none;
}
.menu li {
box-sizing:border-box;
padding:0;
margin:0;
list-style:none;
color:white;
text-decoration: none;
text-align: bottom; vertical-align: bottom;
}
.menu > li ul li{
box-sizing:border-box;
margin-left:20px;
margin-top:5px;
list-style:none;
text-decoration: none;
text-align: bottom; vertical-align: bottom;
}
ul.menu > li {
overflow:hidden;
width:90px;
min-height:90px;
max-height:90px;
padding:10px;
margin-bottom:10px;
background:#5DB26E;
color:#5DB26E;
cursor:pointer;
transition:all 0s ease;
}
ul.menu > li:hover {
width:180px;
min-height:180px;
color: white;
border: 3px solid white;
box-shadow: 0px 0px 0px 3px #5DB26E;
position: relative;
}
ul.menu> li:hover #hideme{display:block; position: absolute;
bottom: 10;}
ul.menu> li:hover .fa-arrow-right{content: "\f023";}
.hoverme:hover .fa-arrow-right,
.hoverme .fa-check {
display: none;
}
.hoverme:hover .fa-check {
display: inline;
}
.menu a {
margin:0;
text-decoration:none;
color:white;
}
<ul class="menu">
<li> <b>news</b>
<ul> <span id ="hideme">
<li><i class="fa fa-arrow-right"></i><i class="fa fa-check"></i> aaaaa</li>
<li><i class="fa fa-arrow-right"></i><i class="fa fa-check"></i> bbbbb</li></span>
</ul>
</li>
</ul>

Auto flipping div w/keyframes

Hello currently I have a div where I would like it to rotate consistently without having to hover or click. here is a working jfiddle of what it is currently. I would like to make that div rotate consistently. http://jsfiddle.net/CsDLG/1/
h3 {
font: 22px normal Futura, sans-serif;
color:#333;
}
#f1_container {
width:430px;
height:250px;
position:relative;
left:35px;
top:10px;
z-index:1;
-webkit-perspective:1000px;
-moz-perspective:1000px;
-o-perspective:1000px;
perspective:1000px;
margin:15px;
}
#f1_card {
width:100%;
height:100%;
-webkit-transform-style:preserve-3d;
-webkit-transition:all 1s linear;
-moz-transform-style:preserve-3d;
-moz-transition:all 1s linear;
-o-transform-style:preserve-3d;
-o-transition:all 1s linear;
transform-style:preserve-3d;
transition:all 1s linear;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
transform:rotateY(180deg);
}
.face {
position:absolute;
width:100%;
height:100%;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
}
.face.back {
display:block;
-webkit-transform:rotateY(180deg);
-webkit-box-sizing:border-box;
-moz-transform:rotateY(180deg);
-moz-box-sizing:border-box;
-o-transform:rotateY(180deg);
-o-box-sizing:border-box;
transform:rotateY(180deg);
box-sizing:border-box;
color:#f5f5f5;
text-align:center;
background-color:#f5f5f5;
padding:10px;
}
.underz {
background:url(http://farm6.staticflickr.com/5069/5614374365_24c4fd01d2_z.jpg) center bottom;
width:430px;
height:250px;
}
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face 1">
<div class="underz"></div>
</div>
<div class="back face center"><h3>We work while we play and have fun!</h3>
</div>
</div>
</div>

You need a CSS3 animation to do this. (remember this feature only exists in Safari and Chrome). then, set the iteration count value to infinite.
here is a demo
animation-iteration-count:infinite;
-webkit-animation-iteration-count: infinite;

Develop Reference

JavaScript is the programming language of the Web.

Button for overlay menu disappears when menu is opened - javascript

Related

Arrow turning 180deg when clicking on dropdown menu

Click not possible after applying js function

how to add image when the checkbox is checked

css/html/javascript accordeon menu - display sublist inside parent "square"

Auto flipping div w/keyframes

Categories

Resources