Tabbed menu animation - javascript

I'm trying to follow the material design theme, although I'm not using polymer.
I want to create a tabbed menu and to animate it similar to how it is specified in the design guides.
I don't want to recreate the ripple effect, just the animated bar at the bottom of the tab that moves when a tab is focused on.
You can see an example here (the animation is at the the very bottom of the page)
Tab touch target animation
I'm not sure if this could be done just using CSS, but if it can't jquery/js isn't an issue.
Any help appreciated.

Note: I don't like that you have put very little effort into this question, you have not shown any attempts at it yourself but I had a look and liked the tabbed menu so much I wanted to create it for my Codepen account.
So I may as well answer this question, I have commented my code so you can work through it and see what everything is doing. Its just a matter of position: absolute the slider and then moving it to the selected tabs location using the width of the tabs to set its position.
$("ul li").click(function(e) {
/* Add the slider movement */
// what tab was pressed
var whatTab = $(this).index();
// Work out how far the slider needs to go
var howFar = 160 * whatTab;
$(".slider").css({
left: howFar + "px"
});
});
#import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
* {
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
background: #222;
}
ul {
font-size: 0;
position: relative;
padding: 0;
width: 480px;
margin: 40px auto;
}
li {
display: inline-block;
width: 160px;
height: 60px;
background: #39CCCC;
font-size: 16px;
text-align: center;
line-height: 60px;
color: #fff;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.slider {
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 4px;
background: yellow;
transition: all 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li class="slider"></li>
</ul>
See here for the ripple effect on the menu too, code snippets don't like them for some reason.

Related

JavaScript-CSS : Trouble getting Nav Menu to change from transparent to opaque on scroll

Okay, so I'm playing around with some design ideas and can't seem to get the JavaScript to do what I want it to. I want a transparent TopNav, that when the user scrolls to say 48px or wherever I deem the TopNav background goes black. Crude Example below of what I want to happen, but when i scroll the TopNav just stays transparent. I've tried a couple of solutions from other answers here to the point of copy/paste and just edit the element names to match my html. I'm just not sure what I'm doing wrong:
CSS
body {
font-family: Futura, Arial, Trebuchet MS, sans-serif;
}
header {
margin: 0;
}
.stickyNav {
position:fixed;
top:0;
left: 0;
width: 100%;
height: 48px;
}
.topNav {
max-width: 1366px;
display: flex;
justify-content: space-between;
margin: 0 auto;
background-color: black;
color: #D4D4D4;
height: 48px;
}
.scroll {
background-color:#000000;
}
.navigationMenu{
display: inline-flex;
list-style: none;
}
JS
var myNav = document.getElementById("TopNav");
window.onscroll = function() {
"use strict";
if (document.body.scrollTop >= 1 || document.documentElement.scrollTop >= 1) {
myNav.classList.add("scroll");
} else {
myNav.classList.remove("scroll");
}
};
HTML
<header >
<div class="stickyNav" >
<nav class="topNav" id="TopNav">
<h3>LOGO HERE</h3>
<ul class="navigationMenu">
<li class="navigationItem">Home</li>
<li class="navigationItem">Services</li>
<li class="navigationItem">About</li>
<li class="navigationItem">Contact</li>
</ul>
</nav>
</div>
</header>
can't seem to get the JavaScript to do what I want it to
This is a matter of CSS styling - not Javascript. The Javascript job in this code is just to detect scroll and add or remove the class.
So if you want the default background to be transparent do one of these:
.topNav { background-color: transparent; } // transparent
.topNav { background-color: rgba(0,0,0,0); } // transparent
and after adding a class to have a background, do:
.topNav.scroll { background-color: rgba(0,0,0,.5); }} // 50% black, "semi-transparent"

Sub navigation disappears when I click on it in responsive view

I've created a sub navigation and when I click on it (using my jquery code), it scrolls down and i can hover over the links but they dont appear at all.
I tried looking into what could be causing the problem such as the color or background but I can't find out where i went wrong. I was messing around with the visibility and display of the element but I don't think theres a problem there, although I'm unsure.
To isolate where the problem of the code may lie, here is the sub navigation code:
ul {
padding: 0;
position: absolute;
top: 33px; right: 16px;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
#include transition('all .2s ease-in-out');
li {
display: block;
width: 100%;
a {
width: 100%;
display: block;
background: lighten(#27344C, 10);
color: #FFF;
padding: 0;
padding-right: 14px;
#include transition('all .2s ease-in-out');
}
}
li:hover {
a { background: lighten(#27344C, 5); }
}
}
I think the problem may actually be the javascript on this line when i edit the css styles:
$('#profileToggle').on('click', function() {
$('#profileList').slideToggle().css({'visibility': 'visible', 'display': 'block'});
$(this).addClass('active');
});
Here is the JSFiddle: http://jsfiddle.net/8xat4v97/1/
(starts line 112 of the scss code)
As with what #BillyNate had said,
the opacity is set to 0 for some reason in my sub navigations.
Removing this line fixed the issue! Thanks :)

Disable Anchor Within Hover Div on Mobile Until Open

I've searched high and low but can't find a solution to this exact problem.
On a desktop browser, when the user hovers over an image, a div appears and they can click the link within the div if they want. However, on a mobile device, the hover is triggered by a click. If the user clicks in just the right spot, even though the div isn't visible yet, they can accidentally click the anchor and navigate away from the page. (In other words, the div goes from display:none to display:block at the same time that the link is clicked.)
I want to prevent that accidental click from happening on mobile browsers, however I still want the link to be usable once the div is visible.
My code:
<style>
.staffpic {
position: relative;
width: 33.33333%;
height: auto;
}
.staffpic:hover .popup {
display: block;
}
.staffpic img {
display: block;
width: 110px;
height: 110px;
margin: 0 auto;
}
.popup {
display:none;
position: absolute;
bottom: 0;
left: -5px;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 15px;
background-color: rgba(255, 153, 0, 0.9);
color: #fff;
text-transform: uppercase;
}
</style>
<div class="staffpic">
<img src="/wp-content/uploads/image.jpg" />
<div class="popup">
John Smith, Director<br/>
CityName | Email John
</div>
</div>
Any ideas? HTML, CSS, JS and jQuery solutions are all welcome! (Maybe something more clever than what I can think of using pointer-events:none along with some jQuery?)
I'm actually about to encounter the same problem in a project, and jotted down a potential solution. Haven't tested it yet but it might help you out. The link should only trigger if the element has a display that's not 'none':
var popup = $('.popup'),
display = popup.css('display');
if (!(display === 'none')) {
popup.on('click', function(e) {
e.preventDefault();
});
}
I found a solution but it's not elegant. I wanted to post it in case someone has this problem in the future and just needs something that will work!
I added a fake link in a span with the real link then set new display styles for it and the real link based on the parent span is being hovered over.
<style>
.staffpic {
position: relative;
width: 33.33333%;
height: auto;
}
.staffpic:hover .popup {
display: block;
}
.staffpic img {
display: block;
width: 110px;
height: 110px;
margin: 0 auto;
}
.staffpic a {
display: none; /* Added */
}
.staffpic.link:hover a {
display: inline; /* Added */
}
.staffpic.link:hover .fakelink {
display: none; /* Added */
}
.popup {
display:none;
position: absolute;
bottom: 0;
left: -5px;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 15px;
background-color: rgba(255, 153, 0, 0.9);
color: #fff;
text-transform: uppercase;
}
</style>
<div class="staffpic">
<img src="/wp-content/uploads/image.jpg" />
<div class="popup">
John Smith, Director<br/>
CityName | <span class="link">Email John<span class="fakelink">Email John</span></span>
</div>
</div>
I'd still love a cleaner solution without all this added html if someone has it.

Android Chrome fixed menu popping in and out with url disappearing

EDIT: Here's a Youtube video that illustrates my problem:
http://youtu.be/OguwjZR_GdU
On my website Black Star Opal I've been trying to implement a sticky menu, much like this one Dansk Kids. I looked at the Dansk Kids website javascript and CSS: there seems to be no javascript involved in their menu (other than the removal of the logo underneath their sticky menu when they scroll). I want my sticky menu to be as smooth as theirs if possible (ie staying flush with the url bar as it pops in and out).
Here's my css for #carttrans, the menu div:
position: fixed;
-webkit-backface-visibility: hidden;
height: 49px;
top: 0px;
left: 0px;
background-color: rgb(255, 255, 255);
width: 100% !important;
z-index: 10000;
text-align: center;
margin-left: 0px;
padding-left: 7px;
border: 1px solid rgb(221, 221, 221);
border-left: none;
border-right: none;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-bottom-color: rgb(221,221,221) !important;
-webkit-transform: translateZ(0);
I also use this js code (only because the menu wouldn't display on iOS Safari without it, although I'm unsure why):
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#carttrans').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
if ($(window).width() < 500)
{
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#carttrans').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#carttrans').css({ 'position': 'fixed' });
}
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
I even removed all the elements in the menu and just left the blank white bar there to see if it would do the same thing. It popped in and out awkardly just like before.
Any help with this would be amazing.
EDIT: As I said below, it's the URL bar popping in and out that seems to be disturbing my sticky menus. It could possibly be a repaint issue or slow down, because on other sites the disappearance of the url bar and the subsequent movement of the menu (for example, on sticky menu demos) is quite smooth and I'm doing/have tested them with the same url bar popping.
Cheers,
Rob
HTML
<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
jQuery (remember to include the jquery library)
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
CSS:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}
header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
transition: all 0.4s ease;
}
REFERENCES:
http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/
PREVIOUS SAME QUESTION ON STACK OVERFLOW:
CSS Sticky header
I used firebug for firefox and just added the following to your #carttrans ID i am assuming you only want this to stick? If so check the css below replace your #carttrans with the below and lemme know if that is what you want?
#carttrans {
background: none repeat scroll 0 0 white;
position: fixed;
text-align: right;
top: 40px;
z-index: 999;
}
Hi i looked at your youtube clip and i see that it could be that the jquery you are using is affecting your main div for the top section #carttrans make sure on this div that your css is marked as important for the top 0px !important so that the jquery won't be able to change it have a try and see if this works?

Show/hide in a jQuery sticky menu (positioned in the middle)

I have a few problems with trying to make a sticky menu that shows/hides with a click button, which is why I'm thinking about getting rid off the whole show/hide option completely and probably rewriting it from scratch in the future.
I can identify 2 major problems:
How to make the show/hide button move along with the sticky menu but to make it in such a way so that it does not disappear with it when the hide button is clicked?
I tried quite a few options on how to animate the menu so that it toggles from right to left (and vice versa) but somehow each time there was something wrong (either with my code or the option I found). How do I do it properly? If I manage to animate it so that 90% of the div hides there will still be place for a hide/show button (and this will also solve problem #1).
Here is my code so far:
http://jsfiddle.net/ohkegetn/
(edit: correct jsfiddle link added)
HTML:
<div class="menuWrapper">
<div id="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>
<div id="toggle">Show/Hide</div>
CSS:
body {
background: black;
font-family: Open Sans;
font-size: 180%;
line-height: 200%;
height: 100%;
color: white;
}
a{
color: white;
text-decoration: none;
}
.menuWrapper {
position: absolute;
top: 225px;
text-align: center;
width: 300px;
left: 0;
}
#toggle {
top: 450px;
position: absolute;
}
#menu {
width: 150px;
background: #0E586D;
color: white;
position: relative;
top: 0;
}
li {
color: #e5e5e5;
transition: 1s;
padding: 0 0 0 10px;
text-align: left;
display: block;
}
#menu ul a li:hover {
transition: 0.3s;
color: white;
background-color: #0f6a84;
}
p {margin: 200px}
JS/jQuery:
// Toggle - show/hide
$(document).ready(function(){
$("#toggle").click(function(){
$(".menuWrapper").fadeToggle("slide");
});
});
// Sticky Menu
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('#menu').position();
sticky_offset = original_position_offset.top;
$('#menu').css('position', 'relative');
});
$(window).scroll(function () {
var sticky_height = $('#menu').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll) > sticky_offset) {
$('#menu').css('position', 'fixed');
}
if((where_scroll) < (sticky_offset + sticky_height)) {
$('#menu').css('position', 'relative');
}
});
Final notes:
The html/css code is probably a bit of a mess, sorry for that but its just a test version. They are not that relevant anyway. The jQuery part is.
Also I would like to stick to Javascript/jQuery without plugins if possible.
Big thanks for any help!
I solve your problem
but this solution is as you think or not i donot know
see this link
$(".scroll").mouseover(function() {
var pos = $(this).offset();
var width = $(this).outerWidth();
$("#toggle").css({
position: "absolute",
top: pos.top + "px",
left: (pos.left+width) + "px"
})
});

Categories