I am having trouble making my website responsive, I have done it for all of the pages and just need to finish off with my navigation.
It can be seen at www.christierichards.co.uk/gcc_website/index.php
Basically when the window is resized down to 635px the nav ul disappears and a menu icon appears, in the CSS at this point the nav ul has been set to display:none. What I need to happen here is that when you click on the menu icon the navigation is set to display block and slides down the entire page to reveal the nav (I hope that makes sense!) This technique is used with a lot of responsive sites nowadays but I cant for the life of me figure out how to do it!
I hope somebody can help me! Thank you
try this>>>
CSS:
ul > li {
width: 24.5%; /*important*/
height: 50px;
background-color:#000;
color:orange;
float: left;
margin-left: 0.5%; /*important*/
list-style-type: none;
}
ul{margin:0px;padding:0px;} /*important*/
HTML:
<ul>
<li>NAV1</li>
<li>NAV2</li>
<li>NAV3</li>
<li>NAV4</li>
</ul>
This resizes depending on browser size. Please comment back. http://jsfiddle.net/S4TcF/ The text can be center align vertically and horiziontaly please comment back for that
You need to do 2 things -
1.Hang an event on the menu button to open/close the nav (I see you're using jQuery, so you can set
$("#pull").on("click", function(){
$("#nav-bg").toggleClass("vertical")});
2.Set the CSS definition to match the class you're adding - something like:
div#nav-bg.vertical {
height: auto;
background: blue;
}
.vertical ul {
display: block;
}
.vertical nav li {
display: block;
float: none;
}
.vertical nav li a {
display: block;
}
.vertical nav {
background: blue;
}
Add onClick event for #pull and toggle the display on #nav-bg ul using jQuery slideUp/slideDown method.
You would need to load it with a display set to none as you are doing now but using one class, let's name it ".hide", then use a jQuery click function to switch to a ".show" class which has the display set to block.
CSS looks like this:
.show {display:block;}
.hide {display:none;}
jQuery:
$("#pull").click(function(){
$("#nav-menu").toggleClass('show');
});
Here is a working fiddle:
http://jsfiddle.net/22sSj/6/
you use a variable that is not defined within the loading of the page your #pull is not visible during a page load that the size of the window is bigger than 635 so the variable var pull = $('#pull'); isn't defined, and change of the window width wouldn't give you any change besides the other style you've got for the bar.
so i recommend you'll try to change the script so it would listen to the window width and will execute this function only when the window width is smaller or equal to 636px.
var winWidth = $(window).width();
$(window).rezise(function(){
if(winWidth <= 635){
addPull();
}
});
function addPull(){
menu = $('nav ul');
menuHeight = menu.height();
$(document).on('click','#pull' function(e) {
e.preventDefault();
menu.slideToggle();
});
}
$(document).ready(function(){
if(winWidth <= 635){
addPull();
}
});
Related
I am trying to make a navbar where brand image can be relocated when scrolling down like the example shown on http://www.agilent.com/home
I know how to addclass using jquery, but I don't know how to add an image when scrolling down or is there any other method to make this effect happen.
How can I achieve this effect? Thanks in advance!
You need to use two images. One on the heading and one on the nav.
This snippet will detect if the navbar is on top and add sticky class to a nav element.
$(window).scroll(function() {
if ($(window).scrollTop() > $("nav").offset().top) {
$("nav").addClass("sticky");
} else {
$("nav").removeClass("sticky");
}
});
When the nav element uses sticky class, it should display the nav logo.
nav .logo {
display: none;
}
nav.sticky {
position: fixed;
top: 0;
}
nav.sticky .logo {
display: inline;
}
jsfiddle demo
I have a navbar that sticks to the top of the page when you scroll past it.
When this navbar is fixed to the top of the page, I would like a logo to appear.
The logo is inside the div #navlogo.
I currently have #navlogo set to display: none. I am thinking that when you scroll past 100px its display will need be set to display block or something similar.
I have tried a few things but i'm not very good at java and had no luck.
You can check out the JSFIDDLE here
This is the script I'm using to set my navbar to fixed
$(window).scroll(function() {
var nav = $('#custom-bootstrap-menu');
var body = $('body');
var top = 100;
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
}
});
and a little css
#logo {
height: 100px;
}
.padding-fifty {
padding-top: 50px;
}
#navlogo {
display: none;
}
As you can see it sets the nav to fixed, and compensates the page offset by adding 50px. I need something here that will set #navlogo to visible. Can anyone offer some assistance?
Thanks so much for your help!
You can set the css display property in your Javascript:
var logo = $('div#navlogo');
logo.css('display', 'block');
For example: https://jsfiddle.net/gx25ospo/3/
Try adding this style to your CSS at last:
.navbar-fixed-top #navlogo {
display:block;
}
Try this https://jsfiddle.net/gx25ospo/4/
.navbar-brand {
display: none;
}
.visible {
display: block;
}
JS
if ($(window).scrollTop() >= top) {
nav.addClass('navbar-fixed-top');
body.addClass('padding-fifty');
$('.navbar-brand').addClass('visible');
} else {
nav.removeClass('navbar-fixed-top');
body.removeClass('padding-fifty');
$('.navbar-brand').removeClass('visible');
}
I have nav implemented with Superfish navbar, as in this example:
http://users.tpg.com.au/j_birch/plugins/superfish/examples/nav-bar/
I have only needed the first level, as in this jsfiddle: http://jsfiddle.net/v1c09us9/
Now, the problem is that if there are like 10 items in the sub menu, the menu items start moving down. I want the menu items to stay in one line and use a small arrow to move right.
I managed to make the menu items appear horizontally by making their parent ul overflow x scrollable.
.sf-navbar li ul{
white-space: nowrap;
width: 100%;
overflow-x: scroll;
}
.sf-navbar > li > ul > li {
display: inline-block;
}
The jsfiddle is showing this implementation. The problem is that now it has a scrollbar which I want to hide, but can't find a way to do it. Also, it breaks the hack I am using to make the menu responsive which I found in this thread, third answer How to make superfish dropdown menu responsive?
I'd like to know if there is any way I can hide the scrollbar and add an arrow to scroll the items, keeping it responsive. Or is there a better alternative to superfish? I searched a lot but couldn't find a good alternative which has the same feature, where the menu is shown as a line instead of a dropdown.
Thanks
Okay, so I have given this a good old try. Basically I have hidden the scroll bar, made it sit inside of the navigation and used some JQuery to scroll the items in the navigation with hovering and still be responsive. You may need to tinker to get it exactly to how you want.
JSFiddle
CSS
.sf-navbar > li > ul {
/* removed min width that was here */
overflow:hidden;
}
/*altered*/
.sf-navbar li ul{
width: 100%;
overflow-x: hidden;
}
.sf-navbar > li > ul > li {
display: inline-block;
}
/*added*/
.sf-navbar li ul:hover { overflow-x:hidden }
JS
$.fn.scrollList = function (delay) {
delay = delay || 2000;
var animateList = function ($list) {
//get first child
var $first = $list.children('li:first');
var width = $first.outerWidth(true);
//animate first two off the screen
$first.animate({
'margin-left': $list.width() * -1
},
// on animation complete
function () {
//reset and move to the end of the list
$(this).css('margin-left', 0).add($(this).next()).appendTo($list);
//start again after delay
setTimeout(function () {
animateList($list)
}, delay);
});
};
return this.each(function () {
var $that = $(this)
setTimeout(function () {
animateList($that);
}, delay);
});
};
$('.sf-menu ul').scrollList();
I'm using jQuery slideToggle function and the media queries.
The problem is that when I resize the window to small size, the toggle links appear. Now if I click on toggle, it works fine, but when I resize the window back to large size, the hidden element still do not appear.
If I do not click on the toggle link, and resize the window back to large size, it works fine.
Demo to see the problem:
Please check the demo here, where you can see the problem:
http://jsfiddle.net/3Jj7J/
Resize the window to small size that you see "Main Menu" link. When you click on it, you will see the toggle. Now if you resize it back to large size, the normal links will still not appear.
Here's my code:
HTML:
<div class="bar">
<a class="toggle" href="#">MAIN MENU</a>
</div>
<div class="nav">
<div class="wrap">
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</div>
CSS:
.bar{
display: none;
border: 1px solid red;
}
#media screen and (max-width: 500px) {
.nav ul {
display: none;
}
.bar{
display: block;
}
}
jQuery:
var menu = jQuery('.nav .wrap > ul');
jQuery(".toggle").click(function() {
menu.slideToggle(500);
});
add on window resize event handler :
var menu = jQuery('.nav .wrap > ul');
jQuery(".toggle").click(function() {
menu.slideToggle(500);
});
jQuery(window).on('resize', function(){
if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
{
menu.show();
}
});
jsFiddle : http://jsfiddle.net/3Jj7J/1/
update: this is alternative solution (just remove inline display property, so it will use css rule).
jQuery(window).on('resize', function(){
if(!jQuery(".toggle").is(":visible") && !menu.is(':visible'))
{
menu.css({'display':''});
}
});
DEMO
I've read your problem and tested it myself. Now, I've made the Link appear by doing the following:
CSS:
#bar {
display: none;
color: #000000;
border: 1px solid red;
}
#media screen and (max-width: 500px) {
#nav ul {
display: none;
}
.bar{
display: block;
}
}
To see for yourself (http://jsfiddle.net/hSZ7t/) What I've done is changed your CSS. Instead of you using:
.bar {
It's now:
#bar {
Following is my js fiddle in which i tried to create a light out effect like the following website bankalhabib.com, The issue is that on hover on menu my rest of screen is not getting dim which i actually want and instead only my menu is getting dim.
Kindly let me know ow can i resolve this issue so i can achieve the same effect as above mentioned site?
Thanks,
http://jsfiddle.net/49Qvm/9/
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Num</li>
</ul>
$('li').hover(function(){
$(this).addClass('hovered');
},function(){
$(this).removeClass('hovered');
});
I think your best bet would be to create an element for the darken effect on the screen. When you hover over the ul element it will toggle the visibility of the darkening element.
You will need to be sure that the z-index value for the ul element is higher than the element that provides the darkening effect (Remember this! When setting z-index on an element you will need to be sure to set it's position CSS property to relative, fixed, or absolute).
Here's a fiddle: http://jsfiddle.net/49Qvm/28/
Try this javascript/css that utilizes z-index to create a focused effect.
CSS
.link {
z-index: 700;
list-style-type: none;
padding: 0.5em;
background: black;
display: inline-block;
cursor: pointer;
color: white;
}
.dim {
width: 100%;
height: 100%;
z-index: -6;
display: none;
content: "";
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
}
body {
background-color: orange;
}
jQuery
var $dim = $('.dim');
$('.link').hover(function(){
$dim.fadeIn(200);
}, function(){
$dim.fadeOut(200);
});
HTML
<div class="dim"></div>
<ul>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
</ul>
Some text here
http://jsfiddle.net/49Qvm/33/
I think maybe this is a scoping issue. Inside the context of the function, "this" refers to the function not the li element. I used to run into a lot of problems related to this. The solution for my cases were to look into using closures to ensure you are adding the class to the correct html element.