Hi is it possible to add the (image) tab below outside the red border and still be responsive when the cursor is over the tab.
What I'm trying to achieve is so the tab sticks out and when the mouse hovers over the tab the menu pops out.
Here is an example but with the tab under the navigation bar when moving the mouse cursor over or inside the red border. The issue is the tab is also hidden.
* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: absolute;
top: -100px;
left: 0;
right: 0;
height: 110px;
border: 1px solid red;
background-image: url("http://static.tumblr.com/e2rgcy1/mWPod8ter/tab.png");
background-repeat: no-repeat;
background-position: center;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
z-index: 5;
}
nav:hover, nav.toggleNav {
top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
<nav>
<ul>
<li>
<a href="/"a target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
</ul>
</nav>
This should get you going in the right direction. If you want to handle this with CSS only (no javascript) and have it responsive especially if your height of your nav bar changes, I would set up media queries that specify a fixed height for your nav at each of whatever breakpoints you determine are best. Reason for using a fixed height is so that you can offset the menu to that exact dimension each time.
I moved your tab image into the HTML instead of using it as a background image. I noticed the image has a lot of whitespace around it. I would trim the image down and remove that to make positioning things in the css easier. I didn't alter that but if you do, you'll need to alter the css a bit to accommodate the new image size. I've kinda fudged it a bit to center it, but that extra white space kinda ruins the centering. You really want left: 50%, then a negative margin of half the width of the image to center it.
* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: relative;
top: -70px;
left: 0;
right: 0;
height: 70px;
border: none;
background-repeat: no-repeat;
background-position: center;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
z-index: 5;
padding: 0;
text-align:center;
}
#img-toggle {
margin: 0 auto;
padding: 0;
position:absolute;
top: -3px; /* fix this when you've trimmed your image */
left: 32%; /* fix this when you've trimmed your image */
}
nav:hover, nav.toggleNav {
top: 0px;
}
ul {
height: 70px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
<nav>
<ul>
<li>
<a href="/"a target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
</ul>
<img id='img-toggle' src="http://static.tumblr.com/e2rgcy1/mWPod8ter/tab.png"/>
</nav>
Related
Please take a look at the following basic example:
html,
body {
height: 100%;
}
body {
margin: 0;
}
.sidebar {
height: 100%;
width: 300px;
background-color: pink;
float: left;
}
.students-list {
height: 100%;
width: 200px;
background-color: skyblue;
float: left;
}
<div class="sidebar">
Students List
</div>
<div class="students-list">
</div>
The pink div is a sidebar with a link. at first the second div which is the skyblue one, should be hidden, and when the user clicks on the link the whole div should slide smoothly from the left (From underneath the pink div).
Do any of you have a tip or can help me out how to achieve the animation?
EDIT: Is it possible to also use another button to slide out even a third div to the right of the second div?
Please check the below code
body {
font-family: "Roboto", sans-serif;
font-size: 18px;
overflow-x: hidden;
}
main {
padding: 40px 25px;
transition: .5s ease-in-out;
width: 100%;
}
nav {
background: #36a;
bottom: 0;
box-shadow: 0 0 5px #666;
height: 100%;
left: -17.5rem;
padding-top: 38px;
position: absolute;
top: 0;
transition: .5s ease-in-out;
width: 17rem;
user-select: none;
}
nav a {
color: #eee;
display: block;
padding: 12px 16px;
transition: .5s;
text-decoration: none;
-webkit-user-drag: none;
}
nav a:hover {
background-color: #39c;
}
#nav-collapse {
padding: 8px 12px;
position: absolute;
right: 0;
top: 0;
}
#nav-expand {
background-color: #333;
color: #eee;
display: block;
left: 0;
top: 0;
padding: 8px 12px;
position: absolute;
text-decoration: none;
transition: .5s linear;
user-select: none;
-webkit-user-drag: none;
}
#nav-expand:focus {
opacity: 0;
}
#nav-expand:focus ~ main {
margin-left: 17rem;
transition-delay: .25s;
}
#nav-expand:focus ~ nav {
left: 0;
transition-delay: .25s;
}
#nav-expand:hover {
background-color: #369;
color: #fff;
}
.icon {
display: inline-block;
background-position: center;
background-repeat: no-repeat;
height: 12px;
width: 12px;
}
.icon-cross {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAABHNCSVQICAgIfAhkiAAAAPdJREFUGJV1jz9LhWAYxc+9rVZDQ+DcEI0NLU19gxr6Ci3tuvjnA+gggSBt4qzzO90b5FBubkHgEM1CBL5K93Ia8jWv4G88/A7PeQAArusekXwRQpiGYSzQ4/v+Gcn3OI6vMRJf+cdWFXrxs8+bOI5vkCTJLckf/rMtiuJhJJIk67oWAIA0Te8mhR2klGvbtg/UvNlC27ZPSlwquaqqZwA1dmGe56uu676HxPO8U5IfMyuGp+fEt+nTQghzqWnaMYBDdUVKuXYc5yLLsnsAmz5e6Lp+AgCIouiK5FfTNCvLsvanT5dl+Wia5t6wOwiC87GoCMPwUom/I2EVwEqOzwUAAAAASUVORK5CYII=');
}
.icon-menu {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAB5JREFUKJFj/P///38GEgATKYoHKWAc9TQRgGRPAwD0IAv+FT8LPwAAAABJRU5ErkJggg==');
}
<a id="nav-expand" href="#">
<span class="icon icon-menu"></span>
Menu
</a>
<nav>
<a id="nav-collapse" href="#">
<span class="icon icon-cross"></span>
</a>
Link1
Link2
Link3
Link4
</nav>
<main>
<h2>Push Sidebar Exmaple</h2>
<p>Please click on menu button.</p>
</main>
I am trying to create a filter like the one here.
I have written some code in an HTML file and the aspect is identical, but the JavaScript does not work, meaning that if I click on a different option that the one active by default then nothing happens.
$(document).ready(function() {
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active");
$(this).addClass("active");
$("#filter-bar").removeClass().addClass($(this).attr("data-target"));
});
})
body {
background-color: #eee;
margin: 0;
padding: 0;
font-family: Tahoma;
}
h2 {
text-align: center;
}
#filter-bar {
width: 100%;
margin: 0;
padding: 0;
height: 36px;
display: inline-flex;
}
#wrapper-filter {
background-color: #fff;
width: 570px;
height: auto;
margin: 30px auto;
border-radius: 30px;
box-sizing: border-box;
}
#filter-bar li {
width: 190px;
background-color: transparent;
text-align: center;
list-style-type: none;
z-index: 10;
cursor: pointer;
font-family: Open Sans, sans-serif;
font-weight: 100;
font-size: 15px;
line-height: 36px;
}
.pill {
position: absolute;
width: 190px;
height: 38px;
background-color: #39c;
border-radius: 30px;
color: #444;
z-index: 10;
border: 5px solid #eee;
box-sizing: border-box;
}
.filter-option {
transition: color 500ms;
}
#filter-bar.option-1 .pill {
margin-left: 0px;
transition: margin-left 200ms ease;
}
#filter-bar.option-2 .pill {
margin-left: 187px;
transition: margin-left 200ms ease;
}
#filter-bar.option-3 .pill {
margin-left: 380px;
transition: margin-left 200ms ease;
}
.option-1.active,
.option-2.active,
.option-3.active {
color: #fff;
transition: color 200ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Animated filter selector</h2>
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill"></span>
<li class="filter-option option-1 active" data-target="option-1">Books</li>
<li class="filter-option option-2" data-target="option-2">Shoes</li>
<li class="filter-option option-3" data-target="option-3">Toys</li>
</ul>
</div>
So, what I think is that the Javascript script is not visible at all, so what it should do, does not happen at all.
Did I place it wrongly? I am a front-end beginner, so I am not sure what is wrong.
Can anyone help me?
Your code works fine, you just missed adding jQuery, add this to the head section in your html file <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This will add the jQuery library to your project, jQuery will add a bunch of new features. Take a look at the docs here
$(document).ready(function() {
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active");
$(this).addClass("active");
$("#filter-bar").removeClass().addClass($(this).attr("data-target"));
});
})
body {
background-color: #eee;
margin: 0;
padding: 0;
font-family: Tahoma;
}
h2 {
text-align: center;
}
#filter-bar {
width: 100%;
margin: 0;
padding: 0;
height: 36px;
display: inline-flex;
}
#wrapper-filter {
background-color: #fff;
width: 570px;
height: auto;
margin: 30px auto;
border-radius: 30px;
box-sizing: border-box;
}
#filter-bar li {
width: 190px;
background-color: transparent;
text-align: center;
list-style-type: none;
z-index: 10;
cursor: pointer;
font-family: Open Sans, sans-serif;
font-weight: 100;
font-size: 15px;
line-height: 36px;
}
.pill {
position: absolute;
width: 190px;
height: 38px;
background-color: #39c;
border-radius: 30px;
color: #444;
z-index: 10;
border: 5px solid #eee;
box-sizing: border-box;
}
.filter-option {
transition: color 500ms;
}
#filter-bar.option-1 .pill {
margin-left: 0px;
transition: margin-left 200ms ease;
}
#filter-bar.option-2 .pill {
margin-left: 187px;
transition: margin-left 200ms ease;
}
#filter-bar.option-3 .pill {
margin-left: 380px;
transition: margin-left 200ms ease;
}
.option-1.active,
.option-2.active,
.option-3.active {
color: #fff;
transition: color 200ms;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>Animated filter selector</h2>
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill"></span>
<li class="filter-option option-1 active" data-target="option-1">Books</li>
<li class="filter-option option-2" data-target="option-2">Shoes</li>
<li class="filter-option option-3" data-target="option-3">Toys</li>
</ul>
</div>
</body>
</html>
I am taking reference from :
https://codepen.io/SudhakarJ/pen/GRgpddL .
I want to make same transition effect in my application, where I have 10 images and I use 3 classes namely cars,animals and fruits and when I click they should be filtered.
But the animated filter selector is not performing transition
HTML
<div class="section">
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill" style="color:#212121"></span>
<li class="filter-option option-1 active" onclick="filterSelection('all')" style="color:#fffefe">All</li>
<li class="filter-option option-2" onclick="filterSelection('cars')" style="color:#fffefe">Shoes</li>
<li class="filter-option option-3" onclick="filterSelection('animals')" style="color:#fffefe">Toys</li>
<li class="filter-option option-4" onclick="filterSelection('fruits')" style="color:#fffefe">Toys</li>
</ul>
</div>
css
body {background-color:#ffffff; margin: 0; padding:0; font-family: Tahoma;}
h2 {text-align:center;}
#filter-bar {width: 100%; margin:0; padding:0; height:36px; display:inline-flex;}
#wrapper-filter {background-color:#000; width: 570px; height:auto; margin:30px auto; border-radius: 30px; box-sizing: border-box;}
#filter-bar li {width: 190px;background-color: transparent; text-align: center; list-style-type: none;z-index:10; cursor: pointer; font-family: Open Sans, sans-serif; font-weight: 100; font-size: 15px;line-height:36px;}
.pill {position: absolute; width:190px; height: 38px; background-color: #39c; border-radius: 30px; color: #444; z-index:10; border: 5px solid #eee; box-sizing: border-box; }
.filter-option {transition: color 500ms;}
#filter-bar.option-1 .pill {margin-left: 0px; transition: margin-left 200ms ease;}
#filter-bar.option-2 .pill {margin-left: 187px; transition: margin-left 200ms ease;}
#filter-bar.option-3 .pill {margin-left: 380px; transition: margin-left 200ms ease;}
.option-1.active, .option-2.active, .option-3.active {color:#FFD700; transition: color 200ms; }
JS
$(document).ready(function() {
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active")
$(this).addClass("active")
$("#filter-bar").removeClass().addClass($(this).attr("data-target"))
})
})
Below is an adapted version of the codepen where:
menu width is changed from 570px to 760px to take in account the 4 elements instead of 3 (it could maybe done in a dynamic way to take in account any number of items)
item width is unchanged (190px)
onclick=filterSelection custom method is removed. JS retrieves the class to apply using the data-target-filter attr
CSS transitions rules are updated with your options (.all, .car, .animals, .fruits instead of example .option-1,.option-2,.option-3) so they match when the value is applied as a class on #bar-filter
$("#filter-bar li").click(function() {
$("#filter-bar li").removeClass("active");
$(this).addClass("active");
$("#filter-bar").removeClass().addClass($(this).attr("data-target-filter"));
});
#filter-bar {
width: 100%;
margin: 0;
padding: 0;
height: 36px;
display: inline-flex;
}
#wrapper-filter {
background-color: #000;
width: 760px;
height: auto;
margin: 30px auto;
border-radius: 30px;
box-sizing: border-box;
}
#filter-bar li {
width: 190px;
background-color: transparent;
text-align: center;
list-style-type: none;
z-index: 10;
cursor: pointer;
font-family: Open Sans, sans-serif;
font-weight: 100;
font-size: 15px;
line-height: 36px;
}
.pill {
position: absolute;
width: 190px;
height: 38px;
background-color: #39c;
border-radius: 30px;
color: #212121: z-index: 10;
border: 5px solid #eee;
box-sizing: border-box;
}
.filter-option {
transition: color 500ms;
color: #fffefe;
}
#filter-bar.all .pill {
margin-left: 0px;
transition: margin-left 200ms ease;
}
#filter-bar.cars .pill {
margin-left: 190px;
transition: margin-left 200ms ease;
}
#filter-bar.animals .pill {
margin-left: 380px;
transition: margin-left 200ms ease;
}
#filter-bar.fruits .pill {
margin-left: 570px;
transition: margin-left 200ms ease;
}
.all.active,
.cars.active,
.animals.active,
.fruits.active {
color: #FFD700;
transition: color 200ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section">
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill"></span>
<li class="filter-option all active" data-target-filter="all">All</li>
<li class="filter-option cars" data-target-filter="cars">Shoes</li>
<li class="filter-option animals" data-target-filter="animals">Toys</li>
<li class="filter-option fruits" data-target-filter="fruits">Fruits</li>
</ul>
</div>
I have built a hamburger navigation that when clicked overlays the navigation elements on a full screen coloured background.
I have a couple of slight bugs which i cannot work out my mistake(s), or how to rectify them.
When you click the hamburger icon and the overlay is then displayed, if you then click anywhere on the background colour, the overlay closes. How can i keep the overlay visible unless a link or the close icon/button is clicked?
When you click a link, the overlay disappears (as expected) but then returns again after a split second. How can i stop this 'flashing' when clicked, so i can either keep the overlay showing until new page is loaded or hide the overlay once clicked.
$(document).ready(function() {
$(".menu-btn a").click(function() {
var scroll = $(window).scrollTop();
$(".overlay").fadeToggle(200);
$(this).toggleClass('btn-open').toggleClass('btn-close');
if ($(this).hasClass('btn-close')) {
$(".navbar").css("background-color", "grey");
} else if (scroll > 100) {
$(".navbar").css("background-color", "#CEB400");
}
});
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
$('.menu a').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
});
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 100) {
if ($('.overlay:visible').length == 0) {
$(".navbar").css("background-color", "#CEB400");
}
} else {
$(".navbar").css("background-color", "grey");
}
});
});
/* OPEN / CLOSE BTNS */
.menu-btn {
z-index: 999;
display: inline;
/* font-size: 32px; */
}
.menu-btn a {
display: flex;
text-decoration: none;
color: #ffffff;
/* safari hack */
align-items: center;
}
.btn-open:after {
color: inherit;
content: "\f394";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
font-size: 40px;
}
.btn-open:hover:after {
color: inherit;
}
.btn-close:after {
color: inherit;
content: "\f2d7";
font-family: "Ionicons";
-webkit-transition: all .2s linear 0s;
-moz-transition: all .2s linear 0s;
-o-transition: all .2s linear 0s;
transition-property: all .2s linear 0s;
font-size: 40px;
}
.btn-close:hover:after {
color: #ffffff;
}
.template-home .btn-open:after,
.template-home .btn-open:hover:after,
.template-home .btn-close:after,
.template-home .btn-close:hover:after,
.template-home .menu-btn a span {
color: #ffffff!important;
}
/* OVERLAY */
.overlay {
position: fixed;
top: 0;
z-index: 99;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba(209, 180, 0);
}
.overlay .menu {
margin: 150px 20px;
/* width: 80%; */
}
.overlay .menu ul {
margin: 0;
padding: 0;
width: 100%;
}
.overlay .menu ul li {
float: left;
padding: 6px 0 0 0;
width: 100%;
list-style: none;
text-align: left;
text-transform: uppercase;
}
.overlay .menu ul li#social {
width: 100%;
margin-top: 50px;
}
.overlay .menu ul li a {
color: #d1b400;
font-weight: 300;
font-size: 20px;
font-family: 'Old Standard TT', serif;
}
.overlay .menu ul li#social a {}
.overlay .menu ul ul {
margin-top: 20px;
}
.overlay .menu ul ul li {
position: relative;
float: none;
margin: 10px 0;
width: 100%;
border: 0;
}
.overlay .menu ul ul li a {
color: #fff;
text-transform: capitalize;
font-weight: 300;
font-size: 30px;
}
.overlay .menu ul ul li a:hover {
color: #000000;
}
/* RESPONSIVE */
#media screen and (max-width: 768px) {
.overlay .menu ul li {
float: none;
margin-bottom: 25px;
width: 100%;
}
.overlay .menu ul li:last-child {
border: 0;
}
.overlay .menu ul ul {
margin-top: 20px;
}
.menu-btn {
right: 25px;
}
}
.allexamples {
position: absolute;
bottom: 0;
font-size: 18px;
font-weight: bold;
width: 100%;
text-align: center;
background: #e9e9e9;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #333;
position: fixed;
}
.menu-social {
display: inline-block;
margin: 0 .4em;
}
.menu-social a {
width: 44px;
height: 44px;
padding: 0;
background-image: url("../img/cd-socials.svg");
background-repeat: no-repeat;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
}
.menu-social .menu-facebook a {
background-position: 0 0;
}
.menu-social .menu-instagram a {
background-position: -44px 0;
}
.menu-social .menu-dribbble a {
background-position: -88px 0;
}
.menu-social .menu-twitter a {
background-position: -132px 0;
}
.overlay .menu ul ul li.description {
padding: 0px 0 10px 0px;
}
.overlay .menu ul ul li.description span {
color: #000000;
font-size: 13px;
font-weight: 300;
text-transform: none;
}
p.tel,
p.email {
margin: 0 0 3px 0;
}
p.tel a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
letter-spacing: 1px;
}
p.email a {
color: #fff!important;
font-weight: 300!important;
font-size: 20px!important;
text-transform: none;
}
.menu-btn a span {
font-size: 16px;
color: #ffffff;
/* line-height: 18px; */
font-weight: 600;
position: relative;
/* top: -5px; */
right: 10px;
}
.navbar-text div {
display: inline-block;
color: #ffffff;
font-size: 16px;
font-weight: 600;
}
.header-contact svg {
margin-left: 10px;
font-size: 22px;
}
.header-contact {
margin-right: 75px;
}
.header-contact a {
color: #ffffff;
}
.header-contact {
font-weight: 600!important;
font-size: 16px!important;
}
.navbar {
-webkit-transition: background-color 500ms ease-in-out;
-ms-transition: background-color 500ms ease-in-out;
transition: background-color 500ms ease-in-out;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<header>
<nav class="navbar fixed-top" style="background-color: grey;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/pb-white.png" width="30" height="30" alt="">
</a>
<span class="navbar-text">
<div class="menu-btn">
<a class="btn-open" href="javascript:void(0)"><span>MENU</span></a>
</div>
</span>
</div>
</nav>
</header>
<div class="overlay">
<div class="menu">
<div class="container">
<ul>
<li>
<ul>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
<li>Heading</li>
<li class="description"><span>Point, Point, Point, Point</span></li>
</ul>
</li>
<li>
<ul>
<li>Heading</li>
<li>Heading</li>
<li>Heading</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div style="height:2000px;"></div>
I currently have my work on a codepen here: https://codepen.io/whitinggg/pen/bLzxGG
To solve both your problems :
You need to remove the onClick event of your overlay, I.E. those lines :
$('.overlay').on('click', function () {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
This will stop triggering event when you click on overlay.
Your first issue is then fixed, and your second issue was that by clicking on a link, you also click on the overlay which contains the link, so the event was triggered twice, and your overlay fade out and in, creating the blink effect.
Just remove this line of code from the script
$('.overlay').on('click', function() {
$(".overlay").fadeToggle(200);
$(".menu-btn a").toggleClass('btn-open').toggleClass('btn-close');
});
I'm working on a website for my own and I don't know how to solve this animation part.
I have a regular Menu and on the top right corner I have a triangle, a white triangle with position absolute and 0 to the right. The point of the triangle is facing to the left side.
I want to animate it (increase size of the left side) and reach the left side of the selected element of the menu.
You can see what I'm talking about on the next image
[![Example][1]][1]
Also, I want to animate it on hover not click, if you stop hovering an element I would like it to go back to initial position. I have the html/css structure but not sure how to animate it to reach exactly the left corner of the menu element.
HTML
<div id="sectionHeader">
<div id="sectionHeaderTriangle"></div>
<div id="sectionHeaderCentralizer">
<img id="sectionHeaderLogo" src="images/logo.svg"/>
<nav>
<ul>
<li>How it Works?</li>
<li>About Us</li>
<li>Shop</li>
<li>Events</li>
<li>Subscribe</li>
<li>Login</li>
</ul>
</nav>
<div id="sectionHeaderContentBox">
<div class="text1">PAGE TEST</div>
<div class="text2">Some Temporal Text goes here...</div>
</div>
</div>
</div>
CSS
body {
margin: 0 auto;
background-color: #fff;
text-align: center;
}
/* Section Header */
#sectionHeader {
position: relative;
width: 100%;
height: auto;
background-color: #29251f;
}
#sectionHeaderCentralizer {
position: relative;
width: 1200px;
height: 450px;
left: 50%;
transform: translateX(-50%);
padding: 10px;
background-color: ;
}
#sectionHeaderLogo {
position: absolute;
left: 30px;
top: 30px;
}
#sectionHeaderContentBox {
position: absolute;
width: auto;
height: auto;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: ;
}
#sectionHeaderTriangle {
width: 0;
height: 0;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
border-right: 40px solid white;
position: absolute;
right: 0;
top: 20px;
}
/*primero en el móvil (mobile first)*/
nav {
position: absolute;
right: 30px;
top: 45px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: auto;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav li a {
color: white;
display: block;
text-decoration: none;
padding: .5em 1em;
}
nav li a:hover {
color: #13baff;
transition: all 0.2s ease-in-out;
}
.text1 {
font-family: 'Fjalla One', sans-serif;
font-size: 65px;
color: #fff;
}
.text2 {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
color: #fff;
width: 650px;
}
/* #media-query */
#media screen and (min-width: 480px) {
nav ul {
display: flex;
}
nav li{
/*la caja puede crecer para ocupar todo el espacio disponible */
flex-grow:1;
text-align:center;
}
}
Can someone guide me? :) thanks!
[1]: https://i.stack.imgur.com/NOyQa.png