I have a mobile nav button that upon touching/clicking, should expand and reveal page links. Problem is when you first start the page the button is already expanded:
But should actually load page with elements hidden like so:
The X icon and Line-stack Icon are also reversed. How would I switch these icons around and also make sure the page loads with them closed? I tried switching the icons classes in the jQuery function to switch the x and line-stack but that hasn't worked.
I know there is a simple concept I am missing but I am quite new to jQuery and am having trouble here.
My HTML:
<nav>
<div class="row">
<img src="img/logoblack.png" alt="logo" class="logo img-fluid">
<img src="img/logoblack.png" alt="logo" class="logo-black">
<ul class="main-nav js--main-nav">
<li>About</li>
<li>Skill</li>
<li>Résumé</li>
<li>Contact</li>
</ul>
<a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
</div>
</nav>
My CSS:
.mobile-nav-icon {
float: right;
margin-top: 30px;
cursor: pointer; /* Used since no href tag specifying link type */
display: none;
}
My jQuery:
$('.js--nav-icon').click(function() {
var nav = $('.js--main-nav');
var icon = $('.js--nav-icon i');
nav.slideToggle(200);
if (icon.hasClass('ion-navicon-round')) {
icon.addClass('ion-close-round');
icon.removeClass('ion-navicon-round');
} else {
icon.addClass('ion-navicon-round');
icon.removeClass('ion-close-round');
}
});
Figured it out, needed to create a media query that would hide the .main-nav with display-none;. This way the tags were hidden on mobile devices but still shows in a navbar on a browser:
/* Small phones to small tablets from: 481px to 767px*/
#media only screen and (max-width: 767px) {
.main-nav {
float: left;
margin-top: 25px;
margin-left: 25px;
display: none;
}
}
Related
So i want to make this responsive menu. On Desktop it looks like this:
And on Mobile it should look stacked overlapping everything under it but not pushing it down. So not like this:
(Before button pressed)
(After button pressed)
You can see that the Slideshow below is pushed down and the obvious misplacement of the menu on the button in general.
Plese help me to fix this, im a poor backend dev.
Here is my code:
function myFunction() {
var x = document.getElementById("menu");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
.menu .icon {
display: none;
}
#media screen and (max-width: 965px) {
.menu a {display: none;}
.menu a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon */
#media screen and (max-width: 965px) {
.menu.responsive {
background-color: white;
position: relative;
}
.menu.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.menu.responsive a {
float: none;
display: block;
text-align: left
}
}
<div class="mainheader">
<div class="logo">
<img src="../bilder/Logo_Koeln_Fliesen_Esch.jpg">
</div>
<div id="menu" class="menu">
Unternehmen
Leistungen
Referenzen
Kontakt
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<img class="bigicon" src="../bilder/menu.png">
</a>
</div>
</div>
So the anwer to fix the issue was to set the responsive menu class to absolute, also you have to use right: 0; so it stays in place.
After that i figured out that i could just move the menu links down since they are also absolute now in order to prevent them from overlapping the button.
Thanks for the effort of helping everyone ;)
function myFunction() {
var x = document.getElementById("menu");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
.menu .icon {
display: none;
}
#media screen and (max-width: 965px) {
.menu a {display: none;}
.menu a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon */
#media screen and (max-width: 965px) {
.menu.responsive {
background-color: white;
position: relative;
}
.menu.responsive a {
float: none;
display: block;
text-align: right
}
}
<img src="../bilder/Logo_Koeln_Fliesen_Esch.jpg">
</div>
<div id="menu" class="menu">
<img class="bigicon" src="../bilder/menu.png">
<span>
Unternehmen
Leistungen
Referenzen
Kontakt
</span>
</div>
</div>
with out looking at whole page code here is what you need to do or something I would always check before going forward.
for css to work properly add this meta tag in head <meta name="viewport" content="minimal-ui, height=device-height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
secondly menu is something that should be stacked higher up on the interactive and display layer so it does not mess with other elements on the page. One way of doing this is to place the tag at the bottom of everything last on page (remember to css absolute positioning on the menu div) or zoom it up like +10000 should do.
please try not to add responsiveness after the fact like when user clicks this will create whole lot of problem going forward as computed vs initial values collide. Leave things to css as much as possible. It is good code from w3school follow its instructions as stated.
For the positioning issue calculate height of the image;
it is actually your icon that is being positioned every thing else is relative to where it should be. so move your icon as first item then every other anchor tag below it. this should solve your positioning issue.
Add z-index property to .menu.responsive class.
currently I am trying to create a navigation bar that switches itself to a hamburger menu if the screen size is too small (responsive / mobile).
https://jsfiddle.net/g7tfnry1/31/
$(document).ready(() => {
$("#btn").click(() => {
$("#items").toggle();
});
});
#navbar {
background: red;
}
#items {
display: flex;
}
#btn {
display: none;
}
#media(max-width: 300px) {
#items {
display: none;
}
#btn {
display: block;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<button id="btn">X</button>
<div id="items">
<div>
<a>
Link 1
</a>
</div>
<div>
<a>
Link 2
</a>
</div>
<div>
<a>
Link 3
</a>
</div>
</div>
</div>
So if you lower the screen size to mobile the css works fine. If you show the items by clicking the button the css works fine too. But after that if you want to get back to a big screen size the menu disappears completely because the items are still hidden or the items don't get aligned in a flex box next to each other.
My question is, do I have to create a resize event $(window).resize() or am I missing something in my css?
When using .toggle (show/hide) you override the CSS rules as it change the display type inline, which has a higher specificity than external rules, unless !important is used in the CSS.
Instead toggle a class .toggleClass, combined with an extra CSS rule #items.show
Updated fiddle
Stack snippet
$(document).ready(() => {
$("#btn").click(() => {
$("#items").toggleClass('show');
});
});
#navbar {
background: red;
}
#items {
display: flex;
}
#btn {
display: none;
}
/* temp. changed to 500 so it works better in the snippet/Chrome when resize */
#media(max-width: 500px) {
#items {
display: none;
}
#btn {
display: block;
}
}
#items.show {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<button id="btn">X</button>
<div id="items">
<div>
<a>
Link 1
</a>
</div>
<div>
<a>
Link 2
</a>
</div>
<div>
<a>
Link 3
</a>
</div>
</div>
</div>
The header includes a simple large white title/logo, with a navigation right below it.
Then upon scrolling past the navigation, the header changes to a pink, semi-transparent bar with the title/logo on the left and a navigation to the right. It sticks to the top of the page as well.
HTML:
<header>
<h2>The</h2>
<h1>Catching Raindrops</h1>
<nav>
<ul>
<li>About</li>
<li>Contact</li>
<li>Music</li>
<li>Travel</li>
<li>Quotes</li>
</ul>
</nav>
</header>
How do I go about this? I've searched everywhere I can think of, but haven't found any tutorials on how to change it the way I want to. I did find this: http://codepen.io/senff/pen/ayGvD which only makes it sticky.
And I don't know JS so can't really figure out how to change it, but this one seems to be the kind I'm looking for, where the class changes, so that I only have to add another class in the css and put all of the on-scroll changes there, am I right? If I am, how do I go about changing it for the logo and navigation? In this CodePen example, only one class has been used, which would only be able to change the navigation, and not the headers, right? Sorry if this sounds incredibly confusing. :/
And in this, the JS code targets selectors and changes the colors, but as I've explained above my changes are more complicated.
The layout for this page is how I want it to be like, only this tutorial confused me to no end :/
This is my CSS
header {
font-family:'Steelfish';
color: #FFF;
margin: 10px 0 0 0;
}
header h1 {
font-size: 90px;
text-align: center;
text-transform: uppercase;
}
header h2 {
font-size: 40px;
text-align: center;
text-transform: uppercase
}
nav {
font-size: 30px;
text-align: center;
text-transform: uppercase;
margin-top: 5px;
}
nav ul {
margin:0;
padding: 0;
list-style-type: none;
}
nav ul li {
display: inline-block;
padding: 0 10px 0 10px;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
nav ul li a:hover {
text-decoration: none;
color: #9E9E9E;
-webkit-transition: color 900ms ease;
-moz-transition:color 900ms ease;
-o-transition: color 900ms ease;
transition: color 900ms ease;
}
Thank you in advance.
The last link is from my site and my tutorials are written for WordPress and Suffusion theme. This can be a reason for what the tutorial looks confusing. In WordPress jQuery library is already loaded and the theme have a markup which is reffered in tutorial.
But html/javascript/css works in WordPress exactly as in any other site, so, with some little adjustments the solution from my site will works for you too. You only need some minor changes for making your markup ready for trasformations.
For making this solution to work will need to link jQuery library in the head section of your page (and I also added here the needed jQuery function):
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$j=jQuery.noConflict();
$j(document).ready(function() {
var nav = $j('#nav');
$j('#left-header').hide();
$j(window).scroll(function () {
if ($j(this).scrollTop() > 150) {
nav.addClass("scroll-nav");
$j('#header').hide();
$j('#left-header').show();
} else {
nav.removeClass("scroll-nav");
$j('#header').show();
$j('#left-header').hide();
}
});
});
</script>
</head>
Then you have to make some small changes in your markup, mostly for naming your sections, but also for adding a new div which need to hold the small logo (#left-header div):
<body>
<header id="header">
<h2>The</h2>
<h1>Catching Raindrops</h1>
</header>
<nav id="nav">
<div id="left-header">The Catching Raindrops</div>
<ul class="menu">
<li>About</li>
<li>Contact</li>
<li>Music</li>
<li>Travel</li>
<li>Quotes</li>
</ul>
</nav>
<div id="just-for-testing" style="height:1000px;"> </div>
</body>
The div with id #just-for-testing is added only for giving some height to the page otherwise you cannot scroll - replace that div with your real content.
Finally, add in your stylesheet the CSS for navigation bar after scrolling:
.scroll-nav {z-index: 9999; position: fixed; left: 0; top: 0 !important; width: 100%;background:rgba(255,0,0,0.5);}
.scroll-nav ul.menu {float:right;}
#nav #left-header {float:left;font-size:80%;}
#nav #left-header a {background:none;}
#left-header {display:none;border:none;}
#left-header img {border:none !important;}
You can see, test and use all these changes in the fiddle linked below
http://jsfiddle.net/drake/bg2S4/
Hope it help
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 {
I am using in-page link anchors to smooth scroll down my page. Everything works just fine and each link hovers to the appropriate image. However, I want the active section to have a different image to show the user where they are. I cant seem to get this to work with anything.
Here is my HTML
<div id="scrollnav">
<ul>
<li class="scrolldot"><span>1</span></li>
<li class="scrolldot"><span>2</span></li>
<li class="scrolldot"><span>3</span></li>
<li class="scrolldot"><span>4</span></li>
<li class="scrolldot"><span>5</span></li>
<li class="scrolldot"><span>6</span></li>
</ul>
</div>
Here is my CSS
#scrollnav { width: 75px; height: 150px; position: fixed; right: 0; top: 100px; z-index: 999999;}
#scrollnav ul li { height: 16px; width: 16px; padding: 0px 0px 7px 0px; }
span { text-indent: -99999px; }
.scrolldot a { display: block; height: 16px; width: 16px; background-image: url(../images/dots.png); background-repeat: no-repeat; background-position: -16px 0; }
.scrolldot a:hover { background-image: url(../images/dots.png); background-repeat: no-repeat; background-position: 0 0; }
.selected { background-color: red; }
This is an example of the section I would scroll to and would want active.
<section id="one">
<div id="mainimagewrapper">
<div class="image1">
<div class="image2">
<div class="970content">
<div id="textdiv">
<h1>This is headline.</h1>
<p>This would be a description if someone wanted to write stuff here. This would be a description if someone wanted to write stuff here. This would be a description if someone wanted to write stuff here.</p>
</div>
</div>
</div>
</div>
</div>
</section>
I think the easiest way to do this, without writing your own jQuery script, is to check out Twitter Bootstrap's "Scrollspy" plugin. I believe it provides the effect you're looking for with very little configuration.
Link: http://twitter.github.com/bootstrap/javascript.html#scrollspy
/* ORDER to define anchor pseudo classes */
a, a:link, a:visited { ... css ...}
a:hover, a:visited:hover {... css ...}
a:active,a.my-active {... css ...}
a:focus {... css ...}
This way you define styling for browser default actions on an anchor.
After that, you might need to trigger some behaviors with javascript (in case the browser misbehaves due to #hash in hyperlink).
Using a jQuery action to add some of your flavour, like .my-active toggled onClick won't help you if you 'reload' the page. You will have to deduce the #hash from the hyperlink, then treat it for your styling.
Simply use jQuery hashchange to get the #hash from hyperlink then trigger a class on your element in scope.
Otherwise, if you just need a plugin to scroll-to some place inside an opened page : http://demos.flesler.com/jquery/scrollTo/ or study jquery-joyride-feature-tour-plugin.
Carry on