I am beginner in JS.
I found wonderful example of responsive menu, and put code inside functions.php. Menu must works like here http://filamentgroup.com/examples/rwd-nav-patterns/ but i have the bug - dropdown menu shift to the right in my site when I use tablet mode.
I tried to include this menu in my site, based on Bootstrap http://b.pusku.com
UPDATE:
Part of the problem with the fiddle was that the space allotted for the logo image was too wide, so I added the following to correct that:
#logo > img {
width: 25px;
}
To get the dropdown to float left at all times, add:
.nav-menu .nav-primary {
float: left;
clear: none;
}
to the #media screen and (min-width: 910px) rule...
#media screen and (min-width: 910px) {
.nav-primary {
float: right;
clear: none;
}
.nav-menu .nav-primary {
float: left;
clear: none;
}
}
Once the navigation links collapse to a dropdown, they'll float left. The links will have an offset of 25px on the left because of the following rule in bootstrap.css (on line 728):
ul, ol {
padding: 0;
margin: 0 0 10px 25px; /*specifically this rule*/
}
You can override that, if you like, by adding margin-left: 0; to the .nav-primary ul rule:
.nav-primary ul {
border: 1px solid #e6e6e6;
margin-left: 0; /* add this to override the bootstrap.css rule*/
}
Finally, as the screen width narrows, the dropdown's width seems to stretch the entire width. If this is not a desired effect, add display: inline-block; to the .nav-primary rule:
.nav-primary {
clear: left;
margin: 0 0 2em;
display: inline-block;
}
I've also re-written the javascript that makes the "responsive" navigation collapse to a dropdown using more (appropriately named) variables so you may better understand why the script does what it does:
$(document).ready(function () {
'use strict';
$('.nav-primary')
// test the menu to see if all items fit horizontally
.bind('testfit', function () {
var nav = $(this),
navPrimaryTop = nav.offset().top, // top of div.nav-primary
navSkipNavTop = nav.prev().offset().top, // top of p containing a#main
topOfFirstLink = nav.find('li:first-child').offset().top, //top of "What We Done"
topOfLastLink = nav.find('li:last-child').offset().top, //top of "Contact Us"
navBelowSkipNav = navPrimaryTop > navSkipNavTop, //boolean indicating whether div.nav-primary is below the p containing a#main
lastLinkBelowFirstLink = topOfLastLink > topOfFirstLink, //boolean indicating whether "Contact Us" is below "What We Done"
displayAsMenu = navBelowSkipNav || lastLinkBelowFirstLink; // boolean indicating whether to collapse to a dropdown menu
$('body').removeClass('nav-menu');
if (displayAsMenu) {
$('body').addClass('nav-menu');
}
})
// toggle the menu items' visiblity
.find('h3').bind('click focus', function () {
$(this).parent().toggleClass('expanded');
});
// ...and update the nav on window events
$(window).bind('load resize orientationchange', function () {
$('.nav-primary').trigger('testfit');
});
});
Here's an updated fiddle demonstrating the basics: http://jsfiddle.net/DD7MC/1/
I did not override either the margin-left or the display in the updated fiddle.
ORIGINAL:
I think it's a CSS conflict between rwd-nav.css and bootstrap.css. Try changing the class definition for .nav-menu .nav-primary h3 in rwd-nav.css to:
.nav-menu .nav-primary h3 {
position: absolute;
top: -10px; /* <-- change this line */
left: auto;
right: 0;
display: block;
width: 4em;
height: 3.75em; /* <-- change this line */
background: #ccc url(img/icons.png) no-repeat -205px 45%;
text-indent: -999em;
cursor: pointer;
font-size: inherit; /* <-- add this line */
}
Also, your hosting provider is returning a 404 for url(img/icons.png). You may want to make sure that file exists.
Related
I'm working on a mock clothing site. I have a parallax banner and a nav below it. What I'm trying to achieve is having the nav stick to the top of the page once the user actually scrolls past the nav. I am able to get the nav to stick to the top of the page, but it does so while still on the banner image.
Here's the CSS
.banner {
background-image: url('https://images.pexels.com/photos/896291/pexels-photo-896291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-size: cover;
min-height: 100%;
background-attachment: fixed;
}
nav {
border-top: solid #000 1px;
background-color: #fff;
padding: 5px;
margin: 0 0 50px 0;
}
.sticky {
position: fixed;
width: 100%;
top:0;
border-bottom: solid black 1px;
box-shadow: 0 2px 5px dimgray;
}
Here's the jQuery
$(window).on('scroll', function() {
if($(window).scrollTop()) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
})
And here's my fiddle demonstrating the issue.
I've had a few theories on why this is happening.
At first I thought maybe it's happening because my top is set to 0, but when I changed the value it still triggered .sticky, but just floated in the middle of the page.
Then I thought, maybe it was because I attached scrollTop() to window. I tried attaching it to nav like this
if($('nav').scrollTop()) {
//add class
}
and that didn't work either.
Thanks in advance for any insight you guys might have!
First of all you will have to check if you the scroll top is bigger then a the value it should be scrolling to the top. If you did that, you should be able to just add a class to that item or remove it.
Example:
var slide = $('yourIdOrClassName').offset().top;
$(window).on('scroll', function() {
if($(window).scrollTop() > slide) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
You will need a class with the property display: none; and a class with the property display: block;
The property of display: none; says that the element will not be shown on the page. display: block is the default display property for the nav / div element.
I am working on a website that's look like this image:
The idea is when clicking on the button of the aside menu the aside menu will close and the bigwrapper will expand its size to fit the blank space so the result will look like this
I have written a function in Javascript to this and it just worked right, however, I wanted to make a media query that let the menu and the menu button disappear when the screen size get less than 840px it also worked
Now the problem is if someone clicked the button before the media query executed the media query effect will get disabled I think that javascript function delete the media query effect how can I fix that here is the code
<div id="mySidenav" class="sidenav">
<img class="menuicons" src="images/icons/menu/home2.png" alt="">Home
<img class="menuicons" src="images/icons/menu/offer.png" alt="">Offers
<img class="menuicons" src="images/icons/menu/cart4.png" alt="">Cart
<img class="menuicons" src="images/icons/menu/about.png" alt="">About us
<img class="menuicons" src="images/icons/menu/contact us.png" alt="">Contact us
</div>
<div id="menu_button" onclick="nav();categoriesScaler()">
<img src="images/icons/menu2.png" alt="Not availabale" />
</div>
<div id="bigwrapper">
<!--Some content goes here-->
</div>
here is the function
<script>
var hidden = false;
function nav()
{
if(hidden == false)
{
closeNav();
hidden = true;
}
else
{
openNav();
hidden = false;
}
}
function openNav()
{
document.getElementById("mySidenav").style.width = "30%";
document.getElementById("bigwrapper").style.width = "60%";
document.getElementById("bigwrapper").style.marginLeft = "35%";
}
/* Close/hide the sidenav */
function closeNav()
{
document.getElementById("mySidenav").style.width = "0";
document.getElementById("bigwrapper").style.width = "90%";
document.getElementById("bigwrapper").style.marginLeft = "5%";
}
</script>
here is the css for bigwrapper and sidenav at the end will be the media query
/* The side navigation menu */
.sidenav {
height: 800px; /* 100% Full-height */
width: 30%; /* 0 width - change this with JavaScript */
/*position: relative; /* Stay in place */
z-index: 1; /* Stay on top */
/* top: 0;
left: 0;*/
background-color: #292929; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.4s; /* 0.5 second transition effect to slide in the sidenav */
float: left;
box-sizing: border-box;
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
margin-bottom: 25px;
transition: 0.3s;
font-size: 30px;
font-weight: bold;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
/*big wrapper*/
#bigwrapper
{
border : 1px solid #000;
width : 60%;
margin : 0 5% 0 35%;
min-height: 800px;
background: #F5F5F5;
padding: 3%;
box-sizing: border-box;
transition: 0.4s;
}
here is the media query
#media screen and (max-width : 840px)
{
.sidenav,#menu_button
{
display: none;
}
#bigwrapper
{
width: 90%;
margin-left: 5%;
}
}
Sorry cause the question is too long.
The widths set by your openNav and closeNav functions seem to be in line with the css, so we can simply use those functions based on width, testing using resize event.
I think the following should work, and the nav should reappear when the browser goes back to > 840px. Add this at the bottom of your script:
window.onresize=function(){
if (window.outerWidth <= 840) {
closeNav();
} else {
openNav();
}
}
Also your button is not visible (outside media query), so add this to your CSS:
#menu_button {
display: block; /* or similar style */
}
BTW, this would be a lot simpler using a class based system. Instead of setting styles you could add classes. When clicking the button you could add .open class to .sidenav (and next button click remove .open). Then in your media queries you could style .sidenav.open { display:none} You could do similar things with the width of the other elements. You can also check if .sidenav has this .open class instead of using var hidden. Much simpler.
I have a bug in my header when I shrink the screen size down. The nav is supposed to disappear (only to reappear if the mobile nav icon is clicked,) which is working fine. However, if I click the mobile nav icon, and then click it again to hide it, the nav stays hidden even when I expand the screen size out again.
I want the nav to show up again when the screen gets to 670px.
CSS
#media screen and (min-width: 671px) {
.nav {
display: block;
}
}
#media screen and (max-width: 670px) {
.navicon {
display: block;
}
.homeiconcontainers {
float: none;
width: 100%;
}
.header {
background: none;
opacity: 1;
}
.pagelinkcontainers {
float: none;
line-height: 50px;
background-color: black;
width: 200px;
padding-right: 0px;
text-align: center;
}
ul {
padding-left: 20px;
}
.nav {
display: none;
}
}
JavaScript
// Show Mobile Navbar Onclick
function MobileMenu (object) {
var elements={"nav":{title: "nav"}};
var mobiledisplay = window.getComputedStyle(document.getElementById("nav")).display;
//Show nav element
for(var nav in elements) {
if(object!==nav) {
document.getElementById(nav).style.display='none';
}
if(object==nav && mobiledisplay=='block') {
document.getElementById(nav).style.display='none';
}
else {
document.getElementById(nav).style.display='block';
location.hash=pages[nav].title;
document.title=pages[nav].title;
}
}
}
My .nav is somehow getting display: none from either my 670px media query, or from the javascript function. I could also be mis-using the min-width media query, but I'm not sure.
Im assuming you don't need to see my HTML to figure this out, but if you would like to, let me know.
Now CSS takes precedence over the JavaScript inline styling forcing the nav bar to be visible.
#media screen and (min-width: 671px) {
.nav {
display: block !important;
}
Why?
JavaScript code setting inline styling wins from CSS styling. Or better said always takes priority to CSS rules except when that CSS rule has !important.
I'm currently building a new website but there is a small hiccup on webkit browsers.
http://typework.github.io/green-life/
If you browse to the url above and resize the browser to mobile size.
Open the navigation (click only once on the hamburger) and resize back to full screen. You can see that my navigation moved to the left. When you keep resizing the browser you see that it moves more and more to the left.
In Firefox I do not have this problem, Safari and Chrome does.
I used plain and simple JavaScript:
$('.menu-link').on('click', function() {
$('.nav').toggleClass('active');
return false;
});
And simple display: block css:
.nav {
display: inline-block;
float: right;
padding: 31px 0 0 0;
margin: 0;
}
#media(max-width: 992px) {
.nav {
position: relative;
margin: 0;
padding: 0;
display: none;
clear: both;
width: 100 %;
}
.nav.active {
display: block;
}
I do not seem to find the bug however. Any ideas?
I think there is a problem in the nav li, change it display:inline-block.
.nav li {
display: inline-block;
padding-left: 30px;
text-align: right;
}
I think this will solve your issue.
also make it display block in media query
I am trying to follow this tutorial and here's my code so far.
The end of the tutorial shows that the last nodes in a branch won't have any vertical bars after it. But I couldn't get it working that way!. Any ideas if I am doing something wrong, or maybe the tutorial is missing something!
I tried even the :last-child pseudo class as shown in the tutorial, but got the same result.
Here's a try using only pseudo-elements and borders:
ul, li{
position: relative;
}
/* chop off overflowing lines */
ul{
overflow: hidden;
}
li::before, li::after{
content: '';
position: absolute;
left: 0;
}
/* horizontal line on inner list items */
li::before{
border-top: 1px solid #333;
top: 10px;
width: 10px;
height: 0;
}
/* vertical line on list items */
li::after{
border-left: 1px solid #333;
height: 100%;
width: 0px;
top: -10px;
}
/* lower line on list items from the first level
because they don't have parents */
.tree > li::after{
top: 10px;
}
/* hide line from the last of the first level list items */
.tree > li:last-child::after{
display:none;
}
demo (edited)
Sadly, the pseudo-class is defined in the upcoming CSS3 specification and at the moment few web browsers support it.
It's written at the end of the tutorial. Maybe that's the reason it's not working.
I believe I've fixed it: https://github.com/gurjeet/CSSTree/pull/1
I modified the CSS to remove the background and changed margin to padding.
ul.tree, ul.tree ul {
list-style-type: none;
margin:0;
padding:0;
}
ul.tree ul {
padding-left: 1em;
background: url(vline.png) repeat-y;
}
ul.tree li {
margin:0;
padding: 0 1.2em;
line-height: 20px;
background: url(node.png) no-repeat;
color: #369;
font-weight: bold;
}
/* The #fff color background is to hide the previous background image*/
ul.tree li.last {
background: #fff url(lastnode.png) no-repeat;
}
ul.tree ul:last-child {
background: none;
}
Thank you guys, helpful answers which made me read some more, and finally I read this article and removed all dependency on JavaScript, and used the nth-last-of-type pseudo-selector to apply the special background to the last li items in a list (ignoring the ul that comes after the last li).
The final code is here. I am going to accept my own answer, unless someone points out some problem with it. (I don't think compatibility with older browsers matters to me at this stage.)
Thanks to #Aram for the answer. #OneTrickPony, your answer went over the head of this noob :) I am sure it does the right thing, but it's a bit too complicated for me.
<style type="text/css">
/* ul[class=tree] and every ul under it loses all alignment, and bullet
* style.
*/
ul.tree, ul.tree ul {
list-style-type: none;
margin:0;
padding:0;
}
/* Every ul under ul[class=tree] gets an indent of 1em, and a background
* image (vertical line) applied to all nodes under it (repeat-y)
*/
ul.tree ul {
padding-left: 1em;
background: url(vline.png) repeat-y;
}
/* ... except the last ul child in every ul; so no vertical lines for
* the children of the last ul
*/
ul.tree ul:last-child {
background: none;
}
/* Every li under ul[class=tree]
* - gets styling to make it bold and blue, and indented.
* - gets a background image (tilted T), to denote that its a node
* - sets height to match the height of background image
*/
ul.tree li {
margin:0;
padding: 0 1.2em;
background: url(node.png) no-repeat;
line-height: 20px;
color: #369;
font-weight: bold;
}
/* The last li gets a different background image to denote it as the
* end of branch
*/
ul.tree li:nth-last-of-type(1) {
background: url(lastnode.png) no-repeat;
}