Develop Reference

Toggle mobile navigation and adress data

Sup guys,
for a while now I have been trying to get this to work in jQuery, but I have no idea how to accomplish that.
It's about the mobile navigation of a basic website.
Basically I am trying to achieve that the mobile navigation closes if we click on the 3 dots with the adress data and the other way around. You can see it in this example:
https://www.templatemonster.com/de/demo/62436.html
Choose the mobile version to see what I mean.
Does anyone know how to do this with jQuery or javascript?
Here is what I have currently:
Adress Data
$('.js--adress-icon').click(function() {
var kont = $('.js--adress-nav');
kont.slideToggle(200);
});
Mobile Navigation
var hamburger = $('#hamburger-icon');
hamburger.click(function() {
var nav = $('.js--main-nav');
nav.slideToggle(200);
hamburger.toggleClass('active');
return false;
});
if ($(window).width() < 768){
$('.main-navigation li a').on('click', function(){
$('.js--main-nav').hide();
$('#hamburger-icon').removeClass('active');
});
};
Thx in advance!

I don't know what your html looks like but this is a simple way to achieve this using css and javascript
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<nav class="menu">
<ul class="active">
<li class="current-item">Home</li>
<li>Menu1</li>
<li>Menu2</li>
</ul>
<a class="toggle-nav" href="#">⁝</a>
</nav>
</body>
then your javascript
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
then your css
/*----- Toggle Button -----*/
/*----- Menu -----*/
#media screen and (min-width: 860px) {
.menu {
width:100%;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}
.menu ul {
display:inline-block;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
}
.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}
/*----- Responsive -----*/
#media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}
#media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
#media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
color:#777;
font-size:20px;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
}
check this fiddle : https://jsfiddle.net/wggs8pf8/

Move Triangle Arrow Sideways

I have a main menu on the header with links, and i have a triangle that moves as the user hovers from one page to another. I want to keep it moving, but i would like to see the transition showing like on this website: harris-active.co.uk
CSS Code:
/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
border:none;
}
#nav-wrap table {
width:100%;
border-collapse: collapse;
border-spacing: 0;
padding:0px;
}
#nav-wrap table td {
border-collapse: collapse;
border-spacing: 0;
}
#nav-wrap .container ul {
list-style: none;
float: right;
margin-right:40px;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
margin-left:40px;
position:relative;
top:0px;
}
#nav-wrap .container ul li a {
display: block;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: #999999;
text-decoration: none;
padding: 50px 0px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 16px;
transition: 0.5s ease;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color: #fff;
border: 0;
text-shadow: 0 0 3px rgba(255,255,255,0.5);
background: url(nav-hover.png) no-repeat center bottom;
transition: 0.5s ease;
}
this is how it is currently showing on my live site: tradey-lb.com

With an html as this:
<ul>
<li class="m1">menu1</li>
<li class="m2">menu2</li>
<li class="m3">menu3</li>
<li class="m4">menu4</li>
<li id="arrowid" class="arrow"></li>
</ul>
You could use absolute position to place the triangle whatever position like:
.arrow {
position:absolute;
bottom:0px;
left:85px;
}
Then add some classes for each different hover like:
.position1 {
left:85px;
}
.position2 {
left:195px;
}
.position3 {
left:300px;
}
And with a easy function, when you hover on your menu you remove any class already there on "Arrow" and then add the position class needed... like:
$(".m1").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position1");
});
$(".m2").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position2");
});
Full example:
$(".m1").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position1");
});
$(".m2").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position2");
});
$(".m3").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position3");
});
$(".m4").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position4");
});
ul {position:relative; border-bottom:2px solid #000;}
li {display:inline-block;padding:12px 30px;overflow:visible;}
.arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
padding:0;
position:absolute;
bottom:0px;
left:85px;
transition: left 0.3s ease-in-out;
}
.position1 {
left:85px;
}
.position2 {
left:195px;
}
.position3 {
left:300px;
}
.position4 {
left:410px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="m1">menu1</li>
<li class="m2">menu2</li>
<li class="m3">menu3</li>
<li class="m4">menu4</li>
<li id="arrowid" class="arrow"></li>
</ul>
I was tempted to delete my answer once I saw your rude comment to another user but this may help someone else around so I'll keep it for now. But try ro learn some manners.

Overlapping Menu Items in Fly Out Vertical Menu (Z-Index not helping!)

Can any CSS expert help me figure out why the Fly Out Vertical Menu items are overlapping as shown in the screenshots. I tried using higher z-index for ul, li, menu wrapper, etc. but to no avail.
I'm using Safari.
You can view the website here: http://www.octavehotels.com
Any help would be greatly appreciated and may be considered for freelance jobs.
Thanks & regards
BK Suru
The Codes:
Fly Out Vertical Menu CSS code:
/* Define the body style */
body {
}
/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{
list-style:none;
}
/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
font-family: 'museosans500', Arial, sans-serif;
font-size: 14px;
text-align: left;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
width:143px;
padding-left: 7px;
margin-bottom: 6px;
height:28px;
line-height: 27px;
cursor:pointer;
background-image:url(../images/hotel-btn-bg.png);
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border:#888 1px solid;
box-shadow: 1px 2px 6px 0px #222;
-webkit-box-shadow: 1px 2px 6px 0px #222;
-moz-box-shadow: 1px 2px 6px 0px #222;
}
/* We apply the background hover color when user hover the mouse over of the li component */
/* for IE < 9 we using class .iehover */
#menuwrapper ul li:hover,
#menuwrapper ul li.iehover{
font-family: 'museosans700', Arial, sans-serif;
font-size: 14px;
background-color: #ffffff;
background-image:none;
position:relative;
}
#dark-1:hover, #dark-2:hover, #dark-3:hover, #dark-4:hover {
-moz-transition: box-shadow 300ms;
-webkit-transition: box-shadow 300ms;
transition: box-shadow 300ms;
}
/* We apply the link style */
#menuwrapper ul li a {
color:#ffffff;
display:block;
text-decoration:none;
}
#menuwrapper ul li a:hover {
color:#111111;
display:block;
text-decoration:none;
}
#menuwrapper ul li:hover > a {
color:#111111 !important;
}
.dimbackground-curtain {
}
#menuwrapper ul .callout {
position:absolute !important;
bottom:31px;
margin-left:-30px;
font-size:28px;
text-shadow: -7px 4px 10px #333;
z-index: 1 !important;
display:block;
padding-left:10px;
}
/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul {
position:absolute;
z-index: 1000;
margin-top: -346px;
margin-left: 162px;
visibility: hidden;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width. */
/* for IE < 9 we using class .iehover */
#menuwrapper ul li:hover ul,
#menuwrapper ul li.iehover ul{
position:absolute;
z-index: 1000;
visibility: visible;
opacity:1;
filter:alpha(opacity=100);
}
/* we apply different background color to 2nd level menu items */
#menuwrapper ul li ul li{
background-color: #ffffff !important;
background-image: none;
width: 485px;
height: 382px;
padding: 5px;
border:#999 1px solid;
-webkit-box-shadow: 0px 8px 50px 2px #000;
box-shadow: 0px 8px 50px 2px #000;
-moz-box-shadow: 0px 8px 50px 2px #000;
}
/* We change the background color for the level 2 submenu when hovering the menu */
/* for IE < 9 we using class .iehover */
#menuwrapper ul li:hover ul li:hover,
#menuwrapper ul li.iehover ul li.iehover{
}
/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
}
/* Clear float */
.clear{
clear:both;
}
/* Arrow 1 */
#menuwrapper ul li .arrow1 {
display: block;
font-size:7px;
line-height:30px;
float:right;
padding-right:7px;
vertical-align:middle;
}
/* Arrow 2 */
#menuwrapper ul li .arrow2 {
color: #333;
font-size:9px;
line-height:30px;
float:right;
padding-right:7px;
vertical-align:middle;
}
/* Arrow 3 */
#menuwrapper ul li .arrow3 {
font-size:11px;
float:right;
padding-right:5px;
padding-top:2px;
vertical-align:middle;
}
.slideshow-wrap {
display: table;
width: 473px;
height: 380px;
}
.hotel-img2{
background-image:url(../images/octave-sarjapura.jpg) !important;
background-repeat: no-repeat;
display: table;
width: 473px;
height: 369px;
}
.hotel-img3{
background-image:url(../images/octave-marathahalli.jpg) !important;
background-repeat: no-repeat;
display: table;
width: 473px;
height: 369px;
}
.hotel-img4{
background-repeat: no-repeat;
display: table;
width: 473px;
height: 380px;
}
.hotel-place {
font-family: 'museosans700', Arial, sans-serif;
text-shadow: 1px 1px 2px #000000;
color: #ffffff;
font-size: 14px;
display: block;
margin-top: -10px;
margin-bottom: 10px;
letter-spacing: 0.03em;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
.hotel-title-space {
position:absolute;
display:table-cell;
vertical-align: bottom;
width:76.75%;
margin-top:-35px;
z-index:10002;
}
#menuwrapper ul li ul:hover .hotel-title-space {
width:77%; !important;
}
.hotel-title {
position:absolute;
display:table-row;
font-family: 'museosans500', Arial, sans-serif;
color:#fff;
font-size: 18px;
line-height: 36px;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
padding-left:11px;
float: left;
width:100%;
height:35px;
background-image:url(../images/hotel-title-bg.png);
}
.hotel-link-space {
position:absolute;
display:table-cell;
vertical-align: bottom;
width:21.15%;
margin-top:-35px;
z-index:10002;
right:5px;
}
#menuwrapper ul li ul:hover .hotel-link-space {
right: 4.005px; !important;
}
.hotel-link {
position:absolute;
display:table-row;
font-family: 'museosans700', Arial, sans-serif;
color:#222222;
font-size: 18px;
line-height: 36px;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
float: left;
text-align: right;
padding-right:5px;
width:100%;
height:35px;
background-image:url(../images/hotel-link-bg.png);
}
.hotel-link:hover {
font-family: 'museosans700', Arial, sans-serif;
color:#222222;
background-color: #ffffff;
}
JQuery Dim Background JS code:
/**
* Usage: $("<selector>").dimBackground([options] [, callback]);
*
* #author Andy Wermke <andy#dev.next-step-software.com>
*
*/
(function ($) {
'use strict';
var dimmedNodes = []; /// [ {$curtain: ?, $nodes: jQueryArray} ]
/**
* Dim the whole page except for the selected elements.
* #param options
* Optional. See `$.fn.dimBackground.defaults`.
* #param callback
* Optional. Called when dimming animation has completed.
*/
$.fn.dimBackground = function (options, callback) {
var params = parseParams(options, callback);
options = params.options;
callback = params.callback;
options = $.extend({}, $.fn.dimBackground.defaults, options);
// Initialize curtain
var $curtain = $('<div class="dimbackground-curtain"></div>');
$curtain.css({
position: 'fixed',
left: 0,
top: 0,
width: '100%',
height: '100%',
background: 'black',
opacity: 0,
zIndex: options.curtainZIndex
});
$('body').append($curtain);
// Top elements z-indexing
this.each(function (){
var $this = $(this);
var opts = $.meta ? $.extend( {}, options, $this.data() ) : options;
this._$curtain = $curtain;
this._originalPosition = $this.css('position').toLowerCase();
if (this._originalPosition != "absolute" && this._originalPosition != "fixed") {
$this.css('position', 'relative');
}
this._originalZIndex = $this.css('z-index');
if (this._originalZIndex == "auto" || this._originalZIndex <= opts.curtainZIndex) {
$this.css('z-index', opts.curtainZIndex+1);
}
});
$curtain.stop().animate({opacity: options.darkness}, options.fadeInDuration, callback);
dimmedNodes.push( {$curtain: $curtain, $nodes: this} );
return this;
};
/**
* Undo the dimming.
* #param options
* Optional. See `$.fn.dimBackground.defaults`.
* #param callback
* Optional. Called when "undimming" animation has completed.
*/
$.fn.undim = function (options, callback) {
var params = parseParams(options, callback);
options = params.options;
callback = params.callback;
options = $.extend({}, $.fn.dimBackground.defaults, options);
var $curtain;
var nodeZIndexMap = []; /// [ [node, originalPosition, originalZIndex], ... ]
this.each(function () {
var $this = $(this);
var opts = $.meta ? $.extend( {}, options, $this.data() ) : options;
if (this._$curtain) {
if (!$curtain) {
$curtain = this._$curtain;
}
if (typeof this._originalPosition != "undefined") {
nodeZIndexMap.push( [this, this._originalPosition, this._originalZIndex] );
}
this._$curtain = undefined;
this._originalPosition = undefined;
this._originalZIndex = undefined;
}
});
if ($curtain) {
$curtain.animate({opacity: 0}, options.fadeOutDuration, function () {
for (var i=0; i<nodeZIndexMap.length; i++) {
var node = nodeZIndexMap[i][0],
position = nodeZIndexMap[i][1],
zIndex = nodeZIndexMap[i][2];
$(node).css({
position: position,
zIndex: zIndex
});
}
$curtain.remove();
callback();
});
var match;
for (var i=0; i<dimmedNodes.length; i++) {
var entry = dimmedNodes[i];
if (entry.$curtain == $curtain) {
match = i;
break;
}
}
if (match) {
dimmedNodes = dimmedNodes.slice(0, i).concat( dimmedNodes.slice(i+1) );
}
}
return this;
};
/**
* Undim all dimmed elements.
* #param options
* Optional. See `$.fn.dimBackground.defaults`.
* #param callback
* Optional. Called when all animations have completed.
*/
$.undim = function (options, callback) {
var params = parseParams(options, callback);
options = params.options;
callback = params.callback;
options = $.extend({}, $.fn.dimBackground.defaults, options);
var _dimmedNodes = dimmedNodes.slice();
var completed = 0, total = _dimmedNodes.length;
for (var i=0; i<dimmedNodes.length; i++) {
_dimmedNodes[i].$nodes.undim(options,done);
}
if (total === 0) {
callback();
}
function done () {
completed++;
if (completed == total) {
callback();
}
}
};
// Plugin default options
$.fn.dimBackground.defaults = {
darkness : 0.75, // 0 means no dimming, 1 means completely dark
fadeInDuration : 310, // in ms
fadeOutDuration : 300, // in ms
curtainZIndex : 999
};
/// #return {options:object, callback:function}
function parseParams (options, callback) {
if (typeof options == "function") {
callback = options;
options = {};
}
if (typeof options != "object") {
options = {};
}
if (typeof callback != "function") {
callback = function () {};
}
return {
options : options,
callback : callback
};
}
}( jQuery ));
WOW Slider code:
/*
* generated by WOW Slider 2.5
* template Elemental
*/
.wowslider-container1 {
zoom: 1;
position: relative;
max-width:485px;
margin:0 auto;
z-index:100 !important;
border:none;
text-align:left; /* reset align=center */
}
#menuwrapper ul li .slideshow-wrap {
display:none;
}
#menuwrapper ul li:hover ul .slideshow-wrap {
display:block;
}
* html .wowslider-container1{ width:485px }
.wowslider-container1 ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
margin-top: 0px !important;
margin-left: 0px !important;
/*table-layout:fixed;*/
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
.wowslider-container1 .ws_images ul li{
width:1%;
line-height:0; /*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
border:none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
-moz-box-shadow: none !important;
}
.wowslider-container1 .ws_images{
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
.wowslider-container1 .ws_images a{
width:100%;
display:block;
color:transparent;
}
.wowslider-container1 img{
max-width: none !important;
}
.wowslider-container1 .ws_images img{
width:100%;
border:none 0;
max-width: none;
}
.wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
.wowslider-container1 .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
.wowslider-container1 .ws_bullets div{
position:relative;
float:left;
}
.wowslider-container1 a.wsl{
display:none;
}
.wowslider-container1 .ws_bullets {
padding: 9px;
}
.wowslider-container1 .ws_bullets a {
width:11px;
height:11px;
background: url(./bullet.png) left top;
float: left;
text-indent: -4000px;
position:relative;
margin-left:5px;
color:transparent;
}
.wowslider-container1 .ws_bullets a:hover{
background-position: 0 50%;
}
.wowslider-container1 .ws_bullets a.ws_selbull{
background-position: 0 100%;
}
.wowslider-container1 a.ws_next, .wowslider-container1 a.ws_prev {
position:absolute;
display:block;
bottom:10.5%;
margin-top:0;
z-index:1001;
height: 48px;
width: 45px;
background-image: url(./arrows.png);
background-repeat:no-repeat;
opacity: 0.7;
}
.wowslider-container1 a.ws_next{
background-position: 100% 10%;
right:0.75%;
}
.wowslider-container1 a.ws_prev {
left:80%;
background-position: 0 80%;
}
.wowslider-container1 a.ws_next:hover{
opacity: 1;
}
.wowslider-container1 a.ws_prev:hover {
opacity: 1;
}
/* bottom center */
.wowslider-container1 .ws_bullets {
top: 6px;
right: 6px;
}
.wowslider-container1 .ws-title{
position:absolute;
display:block;
bottom: 17px;
left: 0px;
margin: 9px;
margin-left: 0px;
margin-right: 9px;
padding:8px;
background:#FFFFFF;
color:#5D5D5D;
z-index: 50;
font-family:'Open Sans',Arial,Helvetica,sans-serif;
font-size: 18px;
border-radius:5px;
-moz-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-box-shadow: 0 0 2px #5D5D5D;
box-shadow: 0 0 2px #5D5D5D;
}
.wowslider-container1 .ws-title div{
padding-top:5px;
font-size: 14px;
}
.wowslider-container1 .ws_logo{
position: absolute;
left:0;
top:0;
height: 100%;
width: 100%;
z-index: 9;
background: url(./loading.gif) 50% 50% no-repeat;
}
.wowslider-container1 .ws_bulframe img.loading{
margin:39px 35px;
}.wowslider-container1 .ws_images {
border-radius: 4px;
}
.wowslider-container1 .ws_effect img{
border-radius: 4px;
}
.wowslider-container1 .ws_bullets a img{
text-indent:0;
display:block;
top:20px;
left:-57px;
visibility:hidden;
position:absolute;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
border: 4px solid #FFF;
border-radius:5px;
-moz-border-radius:5px;
max-width:none;
}
.wowslider-container1 .ws_bullets a:hover img{
visibility:visible;
}
.wowslider-container1 .ws_bulframe div div{
height:90px;
overflow:visible;
position:relative;
}
.wowslider-container1 .ws_bulframe div {
left:0;
overflow:hidden;
position:relative;
width:114px;
background-color:#FFF;
}
.wowslider-container1 .ws_bullets .ws_bulframe{
display:none;
top:18px;
overflow:visible;
position:absolute;
cursor:pointer;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
border: 4px solid #FFF;
border-radius:5px;
-moz-border-radius:5px;
}
.wowslider-container1 .ws_bulframe span{
display:block;
position:absolute;
top:-10px;
margin-left:-6px;
left:57px;
background:url(./triangle.png);
width:15px;
height:6px;
}
Screenshot 1
2]3

yes z-index helping us to avoid the overlapping the elements...
use the z-index maximum for sliding and use the z-index minimum for the list item.

You are on the right track I believe, just doing the z-index the opposite way. Put a higher z-index on the wowslider and a lower z-index on the list.
Right now you have a z-index of 0 on the wowslider and a z-index of 1 on the ul so the ul would appear above the wowslider.
Try that out first

How can I prevent the height of this navbar increasing when I scroll?

I have a floating horizontal navbar positioned using jQuery. It's perfect when the page is static, but as soon as I start scrolling, the navbar's height increases and I am unsure why.
I've a JSFiddle here to show the unwanted effect
Here's the html
<div id="stickyribbon">
<ul>
<li>Week1
</li>
<li>Week2
</li>
<li>Week3
</li>
<li>Week4
</li>
<li>Week5
</li>
<li>Week6
</li>
</ul>
</div>
Here's the css
#stickyribbon {
width:800px;
background: orange;
border-radius: 5px;
}
#stickyribbon ul {
display:table;
width:100%;
list-style-type: none;
}
#stickyribbon li {
display:table-cell;
font-size: 16px;
font-weight: bold;
vertical-align:middle;
}
#stickyribbon li a {
display:block;
color: #fff;
text-decoration: none;
}
#stickyribbon li a:hover {
color: yellow;
}
And lastly the JavaScript
$(function () {
var stickyRibbonTop = $('#stickyribbon').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyRibbonTop) {
$('#stickyribbon').css({
position: 'fixed',
top: '0px'
});
} else {
$('#stickyribbon').css({
position: 'static',
top: '0px'
});
}
});
});
I'd be grateful for any guidance, as I'm completely stumped.
TIA

You can change your CSS to the below, crucially you need to correctly define positioning, padding and margins to establish the layout in both states:
Demo Fiddle
#stickyribbon {
width:800px;
background: orange;
border-radius: 5px;
position:static;
top:0;
margin:15px 0;
}
#stickyribbon ul {
display:table;
width:100%;
list-style-type: none;
padding:0;
margin:0;
}
#stickyribbon li {
display:table-cell;
font-size: 16px;
font-weight: bold;
vertical-align:middle;
padding:0 40px;
}
#stickyribbon li a {
display:block;
color: #fff;
text-decoration: none;
}
#stickyribbon li a:hover {
color: yellow;
}

The div #stickyribbon has some margin and when the page is scrolled, the div is redrawn to fill that margin.
Add
margin:0;
to #stickyribbon ul and #stickyribbon li.

How to add a responsive menu bar to html website [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I want to make a responsive menu looks like following in my website.
I've already made my website responsive with CSS media queries. I want to add this kind of menu when the max-width : 479px .
This is my Project: Link to project

You can try to do something like this.For me it looks like drop down menu. It is just an suggestion
Fiddle LINK
<div class="dd_menu_wrapper">
<!-- MENU -->
<label for="dd-0" class="dd_label">Navigation</label>
<input type="checkbox" class="dd_toggle" id="dd-0">
<ul class="dd_menu">
<li>Home
</li>
<li class="dd_parent">
<label for="dd-1">Products</label>
<input type="checkbox" class="dd_trigger" id="dd-1">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>Link Five
</li>
</ul>
</li>
<li class="dd_parent">
<label for="dd-2">Resources</label>
<input type="checkbox" class="dd_trigger" id="dd-2">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>This is samplek
</li>
</ul>
</li>
<li>Contact
</li>
<li>Resources
</li>
<li>Resources
</li>
</ul>
</div>
CSS
/* _______________________________________________
01 MENU BAR
_______________________________________________ */
.dd_menu_wrapper {
width: 479px;
margin:0 auto;
position: relative;
z-index:9999;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:21px;
color: #ffffff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin-bottom:1px;
}
.dd_menu_wrapper a, .dd_menu_wrapper label {
color: #FFF;
text-decoration: none;
cursor: pointer;
-webkit-transition:color .3s;
-moz-transition:color .3s;
-o-transition:color .3s;
-ms-transition:color .3s;
transition:color .3s;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.dd_menu_wrapper a:hover,
.dd_menu_wrapper label:hover,
.dd_parent:hover label {
color:#000;
background-color:#eff0f1;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.dd_menu {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
*zoom: 1;
background: #565a5c;
}
.dd_menu:before, .dd_menu:after {
content:" ";
display: table;
}
.dd_menu:after {
clear: both;
}
.dd_menu li {
position: relative;
}
.dd_menu > li {
float: left;
font-weight:bold;
}
.dd_menu li a {
padding: 10px 15px;
display: block;
}
.dd_menu > li:hover {
background-color: #eff0f1;
color:#000;
}
.dd_menu li.dd_parent {
}
.dd_menu li.dd_parent ul li a {
color:#000;
text-decoration:none;
font-size:13px;
}
.dd_menu li.dd_parent ul li a:hover {
color:#000;
text-decoration:underline;
}
.dd_menu li.dd_parent > label {
display: block;
padding: 10px 15px;
background-repeat: no-repeat;
}
.dd_menu li.dd_parent > label a:hover {
color:#000000;
}
.dd_menu li.dd_parent > label a:active {
color:#000000;
}
.dd_menu li.dd_parent > label a:focus {
color:#000000;
}
.dd_menu li.dd_parent > label a:visited {
color:#000000;
}
.dd_menu li.dd_parent > label a {
color:#000000;
}
/* _______________________________________________
02 DROP DOWNS
_______________________________________________ */
.dd_menu ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 999;
top: 41px;
left: -999em;
min-width: 170px;
background: #eff0f1;
color:#000;
}
.dd_menu .dd_trigger {
display: block;
position: absolute;
cursor: pointer;
width: 100%;
margin: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
/* _______________________________________________
03 DESKTOP VERSION
_______________________________________________ */
#media screen and (min-width: 768px) {
.dd_menu > li:hover > ul {
left:auto;
}
.dd_toggle, .dd_label {
display: none;
}
}
/* _______________________________________________
04 MOBILE VERSION
_______________________________________________ */
#media screen and (max-width: 767px) {
.dd_label {
display: block;
padding: 10px 15px;
cursor: pointer;
color:#ffffff;
background: #565a5c;
}
.dd_label:after {
width: 24px;
height: 24px;
content: url("../images/toggle.png");
float: right;
}
.dd_toggle, .dd_toggle:checked {
width: 100%;
display: block;
position: absolute;
cursor: pointer;
height: 40px;
margin: 0;
opacity: 0;
}
.dd_menu {
position: absolute;
background: #565a5c;
opacity:0;
visibility:hidden;
}
.dd_menu > li {
padding-right: 0;
float: none;
}
.dd_menu > li:hover {
background-color: transparent;
}
.dd_menu li ul {
display: block;
width: 100%;
top:auto;
left:auto;
width:auto;
z-index: 999;
visibility: visible;
margin-left: 0;
padding-left:12px;
background: none;
}
.dd_toggle:checked + .dd_menu {
opacity:1;
visibility:visible;
}
.dd_menu .dd_trigger + ul {
max-height:0;
opacity:0;
visibility:hidden;
}
.dd_menu .dd_trigger:checked + ul {
position: static;
max-height:999px;
opacity:1;
visibility:visible;
z-index: 999;
background-color:#eff0f1;
}
}

In smaller screen hide your menu with css .
.menu { display:none; }
make one button whos hide on larger screen and visible in smaller screen with help of media queries , then you can add java script like this
$(document).ready(function (){
$("#buttonId").click(function (){
$("#menu").slideToggle();
});
});

The image you included is probablly using Bootstrap Framework to achieve the responsiveness.
You can have a look at it here.
You will have to write CSS media queries to achieve that. You can refer to this tutorial to find how can you make a responsive navbar.

Demo
css
html,body {
margin:0;
padding:0;
}
header {
background-color:black;
overflow:hidden;
padding:2%;
}
#logo {
float:left;
width:calc(100% - 50px);
max-width:280px;
height:40px;
background-image:url('https://lh4.googleusercontent.com/-gjxoCu8Fu3c/AAAAAAAAAAI/AAAAAAAA-Wk/mVaqfjXjn4k/s46-c-k-no/photo.jpg'); /* your logo here! */
background-repeat:no-repeat;
/*background-size:100%;*/
}
nav {
float:right;
padding-top:10px;
}
.navitem {
color:#999;
font-family:Helvetica;
font-size:16px;
margin-left:5px;
text-decoration:none;
font-weight:bold;
padding:8px;
}
.navitem:first-child {
margin-left:0px;
}
.navitem:hover {
color:white;
}
#smartbutton {
float:right;
width:20px;
height:15px;
cursor:pointer;
padding:7px;
border:1px solid #999;
border-radius:6px;
margin-top:5px;
display:none;
}
.buttonline {
background-color:#999;
height:3px;
margin-top:4px;
}
.buttonline:first-child {
margin-top:0px;
}
/* standard menu */
#media only screen and (min-width:480px)
{
#smartbutton {
display:none;
}
nav {
display:inline-block !important;
}
}
/* smart menu */
#media only screen and (max-width:479px)
{
#smartbutton {
display:inline-block;
}
nav {
display:none;
width:100%;
position:relative;
top:5px;
}
.navitem {
border-top:1px solid #999;
display:block;
margin:0px;
}
.navitem:hover {
background-color:#333;
}
}
HTML
<header>
<a id="logo" href="#"></a>
<nav>
Link1
Link2
Link3
</nav>
</header>
jquery
// create smartbutton
$('nav').before('<div id="smartbutton"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
// add click listener
$('#smartbutton').click(function(event)
{
$('nav').animate({height:'toggle'},200);
});

I thinks its better to use Frameworks like Twitter Bootstrap or Foundation but as I've seen you example above I think it is Twitter Bootstrap. It is simple to use the frameworks.
Here is tutorials of Twitter Bootstrap. I give you the navbar link for you to see the example.
http://getbootstrap.com/components/#navbar
See the examples there.. just make you browser smaller for you to see how it is responsive..
I hope it will help you.

Why don't you use a framework? Here for example .
They have a component which is pretty much what you want.
And here you will find an article on how to style it to your liking.