(First I'd like to apologize if my English is bad sometimes, I'm French, so it's kinda difficult to explain everything in details )
I'm working on a personal website, but i got a problem with my responsive navigation.
I made a media query for screen size under 1024px.
When I'm above 1024px, I have my regular navigation bar made with a list.
When I'm under 1024px, I got the small menu logo that appears, and a click event on it makes the whole menu appear and disappear.
But the problem is that if my menu is closed and I expand my window above 1024 pixels, the list isn't visible, and I don't know how to deal with that problem.
Here is my code :
<nav class="fixed_nav">
<div id="nav_left">
<img id="logo_nav" src="img/mini_trombi.png" alt="logo"/>
<p id="txt_nav">123</p>
</div>
<ul class="topnav">
<div id="show_n_hide_nav" class="responsive_link_bg">
<li><a id="top_nav_link" class="nav_links" href="#">ITEM 1</a></li>
<hr class="responsive_separator">
<li><a class="nav_links" href="#">ITEM 2</a></li>
<hr class="responsive_separator">
<li><a class="nav_links" href="#">ITEM 3</a></li>
</div>
<li class="icon">
<a div id="button_nav" class="menu_icon" href="javascript:void(0);">☰</a>
</li>
</ul>
</nav>
Jquery for the click:
$(function(){
$("#button_nav").click(function () {
if(!$("#show_n_hide_nav").is(":visible")){
$("#show_n_hide_nav").slideDown("slow");
} else {
$("#show_n_hide_nav").slideUp("slow");
}
});
});
In my css, I hide the original list under 1024 pixels, and show it with the help of jquery when the users clicks on the menu logo.
Again, sorry if it's hard to understand.
After you solve the invalid HTML, you can try this:
The problem is the slideUp/Down function from Jquery sets inline the display property to the element itself, then when you slideUp and resize the browser the element is still hidden with inline style:
<li id="show_n_hide_nav" class="responsive_link_bg" style="display: none;">
You can solve it adding this mediaquerie to force the element be block over 1024:
#media (min-width:1025px) {
#show_n_hide_nav {
display: block !important;
}
}
Check this example Fiddle
You better toggle class and add css transitions to do slide effect and if you're above 1024, just ignore the show class.
$("#button_nav").click(function () {
$("#show_n_hide_nav").toggleClass("show");
});
If you still want to use slideDown()/slideUp(), you have to bind $(window).resize() event and check whether the window is above/under 1024px.
$(function(){
$("#button_nav").click(function () {
if(!$("#show_n_hide_nav").is(":visible")){
$("#show_n_hide_nav").slideDown("slow");
} else {
$("#show_n_hide_nav").slideUp("slow");
}
});
});
$(window).resize(function(){
if($(window).width() > 1024){
$("#show_n_hide_nav").show();
}
});
On window resize you have to check window size and show nav.
Related
I have a header and a footer that work perfectly when the user is on a desktop and has a mouse and can hover over them and navigate everything that way.
The problem is on mobile when there is no mouse, I need everything to work as close to the same as it does on desktop. I was almost able to make the "PROJECTS" drop-down work to my liking when clicked as well as the "CONNECT" drop-up, but I'm having two issues.
The first problem I'm having is when "PROJECTS" or "CONNECT" drop-ups/drop-downs are clicked, when I click off them or I click them again, the drop-up/drop-down doesn't vanish. It becomes constantly displayed block and I need it to go back to display: none when the user clicks anywhere else or clicks "PROJECTS"/"CONNECT" a second time. I thought the "else" statement in the script I'm using would accomplish that, but apparently it is not working and I'm not sure why! What is the best way to make that work?
The second problem I'm having is when the user clicks on the li item "ONE" inside "PROJECTS" or any of the li items inside "CONNECT", I need the background of the clicked element to turn black and the text to turn white right before it loads the link (similar to how it looks on the desktop version using the :hover css). At this point, when they are clicked it just flashes the gray highlight color over the element for a split second. I tried adding the same type of css but changing "hover" to "focus" or "visited" and I couldn't get either to work. What is the best way to accomplish that?
Here is a JSFiddle of all the code: http://jsfiddle.net/xmdzg8vu/
If you view the JSFiddle on desktop, it will be hard to see the issues I'm having since you have a mouse and can hover... hopefully having the code will help with finding my errors though!
HTML:
<div id="background"></div>
<header id="header">
<div id="nav">
<ul>
<li id="projects" onclick="displayDropdown()">
PROJECTS
<ul>
<a href="/one" class="blocklink" target="_self">
<li id="one">ONE</li>
</a>
</ul>
</li>
</ul>
</div>
</header>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="connect" onclick="displayDropup()">
CONNECT
<ul>
<a href="https://www.instagram.com/" target="_blank" class="blocklink">
<li id="instagram">
INSTAGRAM
</li>
</a>
<a href="https://twitter.com/" target="_blank" class="blocklink">
<li id="twitter">
TWITTER
</li>
</a>
<a href="mailto:mail#mail.com" class="blocklink">
<li id="email">
EMAIL
</li>
</a>
</ul>
</li>
</ul>
</div>
</footer>
JS and CSS are seen in the JSFiddle.
Thank you so much!
UPDATE: I have updated my JSFiddle to remove extra script not applicable to this question. Hopefully that cleans it up a little!
For the second problem, have you tried the :active selector? For example, using part of your CSS code:
#one:focused, #one:visited, #one:hover, #one:active {
background-color: black;
color: white;
}
It looks like there are some issues in your markup. Normally we don't nest ul>a. We normally do ul>li>a.
For problem #1 you could add an onclick event handler to the submenu li to close the dropdown (/dropup) ul when a submenu item is clicked.
Let me know if that works. You might also want to use touch events for mobile (even thought click might work).
So I'm trying to make my navigation bar toggle using JQuery however when I click on the span button, nothing is happening.
HTML
<div id="navbar">
<span class="navbar-btn"></span>
<ul>
<li class="currentpage">Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
JQuery
<script>
$('span.navbar-btn').click(function() {
$('#navbar').toggle();
});
</script>
Live Version can be found at http://joshscottonthe.net/Unit20/Photographer - Just rescale your browser less than 960 pixels and you should see the button
You need to include your script after the document is loaded.
$(function() {
$('span.navbar-btn').click(function() {
$('#navbar').toggle();
});
})
Or you can include it in the same way you did, just make sure that the <script> tag is placed after that <span class='navbar-button'>.
I think this should solve the problem:
$(document).ready(function(){
$('span.navbar-btn').click(function() {
$('#navbar').toggle();
});
});
I have some questions about jQuery animations.
But first, This is what I have currently. http://jsfiddle.net/ssmm0714/00vkoopn/
<div id="container">
<ul class="app-lst">
<li class="item-6">
</li>
<li class="item-7">
<a href="#">
<div class="icon closed"><img src="http://s27.postimg.org/5mixcx1j3/arrow.png" alt="arrow" class="arrow-img"></div>
</a>
</li>
<li class="item-8">
<a href="#">
</a>
</li>
</ul>
</div>
I would like the green div to slide with bouncing effect (like easeOutBounce) and push the yellow div out until only the green div's arrow is shown, and the contents of the green div will appear.
(It's like a sliding card effect?)
Currently, I made it so that the arrow spins on click.
Could someone help me with coming up with the desired effect? I tried doing a slide on both, but I do not know how to stop it when the blue div hits the arrow.
Also, as a side question, is it a good practice to put all widths of each divs in percentage form? I did this because this is going to be a mobile web app, and wanted to make it responsive.
Anyways, for reference,
This is the mock up of what I want it to look like after.
http://jsfiddle.net/ssmm0714/9q04nz0d/
<div id="container">
<ul class="app-lst">
<li class="item-6">
</li>
<li class="item-7">
<a href="#">
<div class="icon closed"><img src="http://s27.postimg.org/5mixcx1j3/arrow.png" alt="arrow" class="arrow-img"></div>
<span> I AM THE HIDDEN TEXT! (loaded different HTML file) </span>
</a>
</li>
<li class="item-8">
<a href="#">
</a>
</li>
</ul>
</div>
To add the bouncing effect you will need the jquery-ui lib.
Next thing - you want both the yellow div and the green div to have the same effect (for the hide and show) and the effect should work the same time.
$('li.item-6').animate({'width' :'0'}, 2000, 'easeOutBounce');
$('li.item-7').animate({'width' :'100%'}, 2000, 'easeOutBounce');
Check out this fiddle: http://jsfiddle.net/w84btwsf/1/
Note that I added some workaround to handle small screens and problems with percentages (you can see it in the top of the js part).
Regarding your question about percentages - yes, this is indeed a good practice. You can also use one the the many css-frameworks that helps with developing responsive layouts (bootstrap is one of them).
I'm learning jQuery and need advice/help on the creation of a drop down menu. So far I have it set up where I scroll down and the links disappear and a link called "menu" appears.
I would like to know how to have the links slide down when I click on the menu.. I'm not too sure how to go about doing this.
Here's what I have so far
html
<div class="container">
<header>
<nav>
<a href="#">
<span class="menu">Menu</span>
</a>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</nav>
</header>
<div class="blueDiv">
</div>
<div class="redDiv">
</div>
<div class="greenDiv">
</div>
</div>
Javascript
$(window).scroll(function(){
var topScroll = $(this).scrollTop();
if (topScroll >= 3) {
$(".menu").show();
$("ul").hide();
} else{
$("span").hide();
$("ul").show();
}
})
$("a").click(function(){
$("nav.ul").slideToggle();
})
I don't mind list of easy to use plug-ins as well.
You're on the right track, here's a JS Fiddle that expands on the example you provided from CodePen.
All you needed to add was:
$(document).scroll(function(){
$('.navigation').hide();
})
So now your script hides the menu when the page loads:
$(document).ready(function(){
$('.navigation').hide();
Then toggles it on or off when the user clicks it.
$('.box').click(function(){
$('.navigation').toggle();
});
});
Lastly, it hides the menu when the user scrolls.
$(document).scroll(function(){
$('.navigation').hide();
})
If you want to snaz it up a bit, you could use slideToggle instead of toggle to hide and reveal the menu :)
The goal is to switch from tabs to an accordion style collapse when the site is less than 676px wide. We are using Bootstrap.
We'll hide ul.nav-tabs and a.accordtion-toggle respectively with css. The tabs work here, but the a.accordion-toggle aren't working. Any ideas?
<ul class="nav nav-tabs" id="myTab" data-tabs="tabs">
<li class="active">Panel 1</li>
<li class="active">Panel 2</li>
</ul>
<a class="accordion-toggle" data-toggle="collapse" data-target="#panel>Panel 1</a>
<div class="tab-pane collapse" id="panel1">
Panel 1 Content
</div>
<a class="accordion-toggle" data-toggle="collapse" data-target="#pane2>Panel 2</a>
<div class="tab-pane collapse" id="panel2">
Panel 2 Content
</div>
<script>
jQuery(document).ready(function ($) {
if (document.documentElement.clientWidth < 767) {
$('#myTab a').click(function (e) {
e.preventDefault();
}
$(".collapse").collapse();
}
});
</script>
In my case just copying tabs content into hidden accordion worked well.
Here is the source I extracted to small plugin - Bootstrap Tab Collapse
I tried a bit on this jsfiddle but it seems complicated to make both plugins work together.
It might be better opting for one of the plugin, using only the classes and JS of this plugin, and then implement your own triggers to complete the default behavior.
I think the accordion behavior of the collapse plugin needs the .accordion-group > .collapse.in structure to work properly - if you don't use your own JS.
I ended up nesting the tab triggers inside one div with the tabbed content (instead of a list above) and using css to position them like tabs for the full screen view. Not ideal but works as long as the data-toggle and data-target are in place.
Not sure if it helps but you could use window.onresize = function() {} and check for the width of your main container. When it is less than some width you could replace the content using js.