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

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"
})
});

Related

Container collaps on addClass

I'm building my personal portfolio and my .main-nav collapses with my container when I .addClass on jQuery. Here is how it looks:
.main-nav {
width: 100%;
height: 5em;
background: #595959;
box-shadow: 2px 2px 2px rgba(0,0,0, .3);
justify-content: center;
align-items: center;
z-index: 1;
}
.sticky {
position: fixed;
top: 0;
}
Jquery:
var yourNavigation = $(".main-nav");
stickyNav = "sticky";
myHeader = $('.main-header').height();
$(window).scroll(function() {
if( $(this).scrollTop() > myHeader ) {
yourNavigation.addClass(stickyNav);
} else {
yourNavigation.removeClass(stickyNav);
}
});
So when I scroll below the header, as the .main-nav becomes fixed, the container under it occupies the space left on top, which makes it collapse.
Any suggestions? Any help is welcome!
Thanks!
If I understand you correctly, your navbar is driven into left corner when it's fixed.
The solution is very simple. Add this to .sticky styles:
.sticky {
...
right: 0;
left: 0;
...
}
If it won't work for you, please, post your html so we can try it (better, create a JS Fiddle), clarify your question and provide as with a screenshot showing what's wrong.

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 :)

Showing underlying Link on mouseOver

I searched a bit and was unable to find an answer that suited my question. Albeit using z-index and absolute positioning would seem to work, it doesn't.
What I am trying to do is have a menu that slides to the left on mouseover, displaying the underlying link... I've been trying to get it to work without much success. I tried using absolute positioning on the cloned element to place it behind its parent, but that didn't work. I used z-index to make sure the clone was behind its parent as well.
My code is as follows:
<ul id="nav">
<li>aaa</li>
<li>bbb</li
</ul>
(function ($) {
$.fn.doIt = function () {
this.find('li')
.css({
overflow : 'auto'
})
.hover(
function(){
$(this).find('a:first').animate({
marginLeft : "-150px"
}, 'fast')
},
function(){
$(this).find('a:first').animate({
marginLeft : "0px"
}, 'fast')
})
this.find('a')
.each(function(){
var slideText = $(this).data('slideText');
$(this)
.clone()
.text(slideText)
.appendTo($(this).parent())
.addClass('slideClass')
});
};
})(jQuery);
The CSS used is:
#nav li{
list-style: none;
float: left;
width: 150px;
height: 20px;
color: #CCCCCC;
height: 60px;
line-height: 30px;
text-align: center;
}
#nav a{
position: relative;
display: block;
width: 150px;
z-index: 1;
background: #777777;
}
.slideClass{
position: absolute;
left: 0;
top: 0;
display: block;
background: #000000;
color: #6699dd;
z-index: 3;
}
You can see a live example at:
jQuery slide menu
I have modified your CSS in a working fiddle
The key changes I've made are to your css:
#nav li {
display: inline-block;
overflow: hidden !important;
white-space: nowrap;
}
I also removed your height: declarations for #nav li and position: related declarations for .slideClass. Finally, I've changed #nav a to be display: inline-block; as well.
Not 100% sure if this was what you were looking for: http://jsfiddle.net/t4ag1tby/
Changed the li a to absolute
#nav a{
position: absolute;
top: 0;
...
}
And the hover action to animate the position instead of margin.
.hover(
function(){
$(this).find('a:first').animate({
left : "-150px"
}, 'fast')
},
function(){
$(this).find('a:first').animate({
left : "0px"
}, 'fast')
})

Tabbed menu animation

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.

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?

Categories