I have links on a menu with underlines sliding in out when hovered. I'm trying to add padding left and right to my links on my fixed menu, but for some reason the padding don't show.
Heres an image of what I'm trying to achieve (notice how the active links underline is padded left and right, you can see how the line is covering more than just the text)
Heres my fiddle
Ive read here on stack overflow that the problem could be the display, i changed it to inline-block or block and that didn't work.
My HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav_Wrapper_dk">
<nav id="dk_Nav" role="navigation" class="cf">
<div>Home </div>
<div>About us</div>
<div>Gallery</div>
<div>Find Us</div>
<div>Contact</div>
<div>Catering</div>
<div>Blog</div>
</nav>
</div>
<div id="home"></div>
<div id="about"></div>
My CSS:
#nav_Wrapper_dk {
position: fixed;
width: 100%;
height: 50px;
background: white;
border-bottom: 1px solid #f1f1f1;
}
#dk_Nav {
max-width: 1280px;
/* width: 742.6167px; */
height: 50px;
margin-left: auto;
margin-right: auto;
top: 0;
right: 0;
left: 0;
z-index: 2001;
}
#dk_Nav div {
margin-top: 11px;
}
#dk_Nav #logo_dk {
margin-top: 0px;
}
.link_Button {
display: block;
float: left;
height: 40px;
font-family: 'Open Sans', sans-serif;
font-size: .7em;
color: black;
line-height: 3.3em;
text-transform: uppercase;
letter-spacing: .2em;
padding-left: 12px;
}
/* LEFT TO RIGHT */
.sliding-u-l-r {
display: inline-block;
}
.sliding-u-l-r:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .3s ease, background-color .3s ease;
}
.sliding-u-l-r:hover:after {
width: 100%;
background: black;
}
.sliding-u-l-r.active:after {
width: 100%;
background: black;
}
#home {
width: 100%;
height: 1000px;
background: #ccc;
}
#about {
width: 100%;
height: 1000px;
background: white;
}
My JAVASCRIPT
// Scroll Menu
$(function() {
$("nav a").click(function() {
//**Add class active to current clicked menu item and remove class active from other menu item**//
$(this).addClass('active').parent().siblings().children().removeClass('active');
//** Smooth scroll Logic **?
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Can someone tell me what i'm doing wrong?
Thanks in advance!
Easy solution
.sliding-u-l-r:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .3s ease, background-color .3s ease;
padding-left: 6px;
padding-right: 6px;
position: relative;
left: -6px;
}
Better solution
Apply the underline effect :after on the parent of the a tag
e.g.
<div class="item">
Home
</div>
.item:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .3s ease, background-color .3s ease;
}
See demo: https://jsfiddle.net/Lv0bx99k/5/ (made some changes to make this idea work)
Related
Specifically, I want to change colors of sticky and fixed elements on my page dynamically as the user scrolls into specific sections. I know that this is possible with the pixel height on scroll, but I can't use this technique, because the background of my page consists of a stack of images. This causes the pixel height of the page to change dramatically on window resize due to the height needing to increase as the image gets wider
.
I guess it would be possible to do this with a bunch of media calls, but I'm trying to avoid this, and I'm not even sure it would work.
My main goal would be:
When a div is scrolled into view, the style (mainly color and font-weight) of the navigation bar and fixed footer change.
Also - This has to be in Vanilla JS.
If someone has a pure CSS solution, that's very acceptable as well, I just can't think of a way this would work.
Thank you!
How About Using This?
These are VanillaJS SpyScroll
https://github.com/cferdinandi/gumshoe
https://github.com/ederssouza/vanillajs-scrollspy
From Codepen zchee/pen/ogzvZZ
HTML
<div class="m1 menu">
<div id="menu-center">
<ul>
<li><a class="active" href="#home">Home</a>
</li>
<li>Portfolio
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div id="home" class="section"></div>
<div id="portfolio" class="section"></div>
<div id="about" class="section"></div>
<div id="contact" class="section"></div>
SCSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.menu {
width: 100%;
height: 75px;
background-color: rgba(0, 0, 0, 1);
position: fixed;
background-color: rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.light-menu {
width: 100%;
height: 75px;
background-color: rgba(255, 255, 255, 1);
position: fixed;
background-color: rgba(4, 180, 49, 0.6);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#menu-center {
width: 980px;
height: 75px;
margin: 0 auto;
ul {
margin: 15px 0 0 0;
li {
list-style: none;
margin: 0 30px 0 0;
display: inline;
}
}
}
.active {
font-family: 'Droid Sans', serif;
font-size: 14px;
color: #fff;
text-decoration: none;
line-height: 50px;
}
a {
font-family: 'Droid Sans', serif;
font-size: 14px;
color: black;
text-decoration: none;
line-height: 50px;
}
#home {
background-color: grey;
height: 100%;
width: 100%;
overflow: hidden;
}
#portfolio {
height: 100%;
width: 100%;
}
#about {
background-color: blue;
height: 100%;
width: 100%;
}
#contact {
background-color: red;
height: 100%;
width: 100%;
}
JS
(function() {
'use strict';
var section = document.querySelectorAll(".section");
var sections = {};
var i = 0;
Array.prototype.forEach.call(section, function(e) {
sections[e.id] = e.offsetTop;
});
window.onscroll = function() {
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
for (i in sections) {
if (sections[i] <= scrollPosition) {
document.querySelector('.active').setAttribute('class', ' ');
document.querySelector('a[href*=' + i + ']').setAttribute('class', 'active');
}
}
};
})();
I am working with a navigation bar that has slides a menu from right to left.
With my code, when the user picture is being clicked, it will show the menu.
So when it is loaded, menu is hidden and when it is clicked will be showed. I used to add class hidden and show to toggle to menu.
$(document).ready(function(){
$(".img-profile").click(function(){
$(".menu-wrapper").addClass("show");
});
$(".menu-bg").click(function(){
$(".menu-wrapper").removeClass("show");
});
});
CSS
.show{
display: inline-block !important;
}
.hidden{
display: none;
}
The problem is it's not animating even if I added the transition: all 0.2s linear 0s and the transform from 250px to 0
.menu-wrapper > .login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
right: 0;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
transform: translateX(0px);
}
.menu-wrapper .show > .login-menu{
transform: translateX(250px);
}
Also, I want to animate it on menu-close from right to left.
My full code is at JSFIDDLE
Changing the display CSS attribute does not trigger animations. Use the visibility attribute instead. This one triggers animations.
If you have good reason to use display (which is completely possible), you'll need to set the display attribute first to show the element, but keep the visibility on hidden. Set the visibility: visible attribute right after and the animation will be triggered.
Edit: I had a look at your fiddle. Don't use the .hidden class, because bootstrap sets display:none on .hidden elements. Just use the .show class alone, putting visibility:visible in the show class, and setting visibility:hidden on the .menu-wrapper element. Remove all the display:none lines in your CSS and you'll be fine.
Try to do it with this trick.
<header class="header">
<div class="container">
<a class="logo" href="/"></a>
<div class="login">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<div class="login-menu">
<div class="img-profile" style="background-image: url('http://graph.facebook.com/4/picture?width=100&height=100')"></div>
<p>Mark Zuckerberg</p>
<button type="button" class="btn btn-danger btn-block">Logout</button>
</div>
<div class="menu-bg"></div>
</div>
</div>
.header{
width: 100%;
height: 50px;
background: #fff;
border-bottom: 2px solid #ececec;
}
.header > .container{
height: 100%;
position: relative;
}
.logo {
background: url("http://d12xrwn9fycdsl.cloudfront.net/static/images/sv_logo.png") no-repeat scroll center center / contain ;
display: inline-block;
width: 23rem;
height: 100%;
}
.select-lang {
display: inline-block;
position: absolute;
top: 15px;
}
.login{
position: absolute;
right: 0;
top: 0;
}
.img-profile{
background: no-repeat scroll center center / contain;
position: relative;
top: 3px;
border-radius: 40px;
width: 40px;
height: 40px;
display: block;
margin: auto;
}
.login > .menu-wrapper{
display: none;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 5;
height: 100%;
width: 100%;
}
.login-menu{
background-color: #fff;
height: 100%;
overflow-y: auto;
position: fixed;
top: 40px;
right: -250px;
width: 250px;
z-index: 5;
padding: 30px 20px;
text-align: center;
transition: all 0.2s linear 0s;
}
.show{
right: 0;
}
.hidden{
right: -250px;
}
.login-menu > .img-profile {
border-radius: 70px;
height: 70px;
width: 70px;
}
.login-menu > p {
font-weight: bold;
margin: 10px 0 20px;
}
.menu-wrapper > .menu-bg{
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
$(document).ready(function(){
$(".img-profile").click(function(){
$(".login-menu").addClass("show");
});
$(".img-profile").click(function(){
$("body").removeClass("show");
});
});
Take a look here https://jsfiddle.net/SkiWether/KFmLv/
this is working for me
$(".myButton").click(function () {
// Set the effect type
var effect = 'slide';
// Set the options for the effect type chosen
var options = { direction: $('.mySelect').val() };
// Set the duration (default: 400 milliseconds)
var duration = 500;
$('#myDiv').toggle(effect, options, duration);
});
I have css blocks that must go away from the page when they gain the .gone class.
I register a click event in Javascript, in the event handler I add the .gone class to the clicked element.
The bullet should go away to the left, or to the right, but it just disappears.
Here is the HTML code:
<div id="firstPage">
<div id="bullets">
<div data-href="#projects" class="top left">Projects</div>
<div data-href="#skills" class="top right">Skills</div>
<div data-href="#experiences" class="bottom left">Experiences</div>
<div data-href="#contact" class="bottom right">Contact</div>
</div>
</div>
The javascript code:
var bullets = [];
function openPage(e) {
e.preventDefault();
this.classList.add('gone');
}
var tmpBullets = document.querySelectorAll('#bullets div');
for(var i = 0 ; i < tmpBullets.length ; i++) {
tmpBullets[i].addEventListener('click', openPage, true);
bullets.push(tmpBullets[i]);
}
The CSS code:
html {
font-family: QuattrocentoSans;
overflow: hidden;
}
#firstPage {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('../images/noise.png');
}
#firstPage h1 {
display: block;
margin: auto;
text-align: center;
margin-top: 100px;
font-family: Pacifico;
font-size: 50px;
color: #fff;
text-shadow: 0 0 3px #000;
}
#bullets {
display: block;
width: 320px;
margin: auto;
}
#bullets div {
position: absolute;
display: inline-block;
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
background-color: #333;
text-align: center;
color: white;
text-decoration: none;
margin-top: 10px;
margin-right: 5px;
margin-left: 5px;
text-shadow: 0 0 3px #999;
font-size: 1.2rem;
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
#bullets div.top {
top: 100px;
}
#bullets div.bottom {
top: 270px;
}
#bullets div.left {
left: calc(50% - 165px);
}
#bullets div.right {
right: calc(50% - 165px);
}
#bullets div:hover {
box-shadow: 0 0 10px #555;
transition: box-shadow 500ms;
}
#bullets div.left.gone {
left: -160px;
}
#bullets div.right.gone {
right: -160px;
}
See jsfiddle for live demo : http://jsfiddle.net/8u9j6n6x/
Thanks for your help
You need to add the transition to the .gone class not the #bullets div
#bullets div.gone {
transition: box-shadow 500ms, left 1000ms, right 1000ms;
}
updated fiddle http://jsfiddle.net/8u9j6n6x/1/
I have a few images where I'd like half borders to the top right corner and to the bottom left corner. The problems I am running into are:
problem 1: I have managed to cut of borders at all four corners, but can't cut of top left and bottom right. code below (I'm using this fiddle provided by KillaCam, and experimented a little, with the result that all four corners appear at first and then three of them disappears! : http://jsfiddle.net/3jo5btxd/
#div1 {
position: relative;
height: 100px;
width: 100px;
background-color: white;
border: 1px solid transparent;transition: border 2000ms ease 0s;
}
#div2 {
position: absolute;
top: -2px;
left: -2px;
height: 84px;
width: 84px;
background-color: #FFF;
border-radius: 15px;
padding: 10px;
}
Problem 2 I already have a panel that has a link vertically centered using the css table method, which is also visible on hover. When I combine the panel's code with the corner borders, my vertical centering goes out of whack! I guess that is happening because of the extra div I am using for borders, but I haven't managed to make the corners with :before (doesn't work on hover). HTML and css below and the also the image showing what I want to make:
<ul class="img-list">
<li class="category_lists one-third column-block" '="">
<a href="http://kohphangan.smartsolutionpro.us/category/adventure/">
<img src="something.jpg"/>
<span class="text-content">
<span>Adventure</span>
</span>
</a>
</li>
<li class="category_lists one-third column-block" '="">
<a href="http://kohphangan.smartsolutionpro.us/category/beach-2/">
<img src="something2.jpg" />
<span class="text-content">
<span>Beach</span>
</span>
</a>
</li> </ul>
CSS:
/*css for the categories on home page*/
.img-list{margin:0;padding:0; list-style:none}
ul.img-list li {
display: inline-block;
height: 20em;
margin: 0;
position: relative;
}
.category_lists.one-third{width:33%; margin-left:0;}
.category_lists img{width:100%; height:auto;}
span.text-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
span.text-content {
background: rgba(38,196,83,0.7);
color: white;
cursor: pointer;
display: table;
height: 7em;
left: 0;
position: absolute;
top: 0;
width: 100%;
opacity: 0;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
font-size:42px;
text-transform:uppercase;
font-family: 'Raleway', sans-serif; font-weight:300
}
ul.img-list li:hover span.text-content {
opacity: 1;
}
And the image showing what I want to make: http://tinypic.com/r/2gy5zk4/8 .
If I have to use javascript, I will, but I am not very good at it, so counting on css to make it work. Thanks a lot for any help.
Here's one solution: http://jsfiddle.net/f7u6yxLq/.
HTML:
<div></div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
padding: 10px;
}
div {
position: relative;
display: table;
width: 200px;
height: 100px;
background: url("http://placehold.it/200x100")
no-repeat
top left;
}
div:before,
div:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
border: solid white;
border-width: 2px 2px 0 0;
display: none;
}
div:before {
right: 5px;
top: 5px;
}
div:after {
border-width: 0 0 2px 2px;
bottom: 5px;
left: 5px;
}
div:hover:after,
div:hover:before {
display: block;
}
Solution for problem #1: http://jsfiddle.net/3jo5btxd/2/
.div2:before, .div2:after {width:9px; height:9px; position: absolute;background:#fff; content:'';}
.div2:before {top:0; left:0;}
.div2:after {bottom:0; right:0; }
I am working on a menu using jQuery + CSS3.
I have an up arrow on the right side of the menu and when clicked the menu slides up and the image switches to a down arrow.
The only problem is that if you click the down arrow, it does't slide back down, even though I've provided a somewhat legit piece of code in order for it to work.
I am new to jquery so any help would be very much appreciated!
HTML:
<nav id="tfc-new-nav">
<div class="wrapper">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Shopping Cart</li>
<li>My Account</li>
</ul>
</div>
<div class="hide-menu menu-active"></div>
</nav>
CSS:
.wrapper {
display: block;
height: 100%;
width: 1000px;
position: relative;
margin: 0 auto;
}
#tfc-new-nav {
display: block;
height: 45px;
width: 100%;
background: #808E91;
position: relative;
top: 50px;
}
#tfc-new-nav ul {
list-style: none;
}
#tfc-new-nav ul li {
display: block;
height: 45px;
width: 10%;
float: left;
text-align: center;
line-height: 45px;
}
#tfc-new-nav ul li a {
display: block;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: 'Felix Titling', serif;
cursor: pointer;
-webkit-transition: background .3s ease-in;
-moz-transition: background .3s ease-in;
-ms-transition: background .3s ease-in;
-o-transition: background .3s ease-in;
transition: background .3s ease-in;
}
#tfc-new-nav ul li a:hover {
background: #50798D;
}
#tfc-new-nav .hide-menu {
position: absolute;
top: 20px;
right: 10px;
cursor: pointer;
}
#tfc-new-nav .hide-menu.menu-active {
display: block;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/6/61/Black_Up_Arrow.png');
background-size: 100% 100%;
height: 7px;
width: 7px;
}
#tfc-new-nav .hide-menu.menu-hidden {
display: block;
background-image: url('http://www.wpclipart.com/signs_symbol/BW/direction_arrows/down_arrow.png');
background-size: 100% 100%;
height: 7px;
width: 7px;
}
JavaScript:
$(document).ready(function() {
$("#tfc-new-nav .hide-menu.menu-active").click(function() {
$("#tfc-new-nav").animate({
top: "30px"
});
$(this).removeClass("menu-active");
$(this).addClass("menu-hidden");
$(this).animate({
top: "35px"
});
});
$("#tfc-new-nav .hide-menu.menu-hidden").click(function() {
$("#tfc-new-nav").animate({
top: "95px"
});
$(this).removeClass("menu-hidden");
$(this).addClass("menu-active");
$(this).animate({
top: "20px"
});
});
});
LIVE DEMO
You should delegate your events, like
$("#tfc-new-nav").on("click", ".menu-hidden", function() {
...
});
DEMO
Use .live() instead .click()
Example:
$("#tfc-new-nav .hide-menu.menu-hidden").live("click", function() {
// Do stuff here
}
This takes into account updated manipulation of the DOM, tested and worked
You should be able to call $.slideToggle() to handle this and minify your code.
Here is a link to the manual entry: http://api.jquery.com/slideToggle/
This will animate and set display:none when the anitmation is complete.