I am trying to build an extremely simple responsive navigation menu. Am having some problems here.
When I resize the window equal to or lower than 768px in width, the responsive menu
will not work.
When I refresh the page at a lower window width equal to or less than
768px, the responsive navigation works... But, if I resize even by
one pixel, the responsive navigation display is hidden again.
I have created a CodePen here: http://codepen.io/anon/pen/fHsti
Thank you so much for your help!
Honestly the best way to approach this is to only use JS for managing the state of the nav between media queries, everything else should be tucked away in media queries. Something like MediaCheck or matchMedia is a great way to tie media queries and JS together.
I created a simple demo using your markup, and I think I got the functionality you were looking for. I used mediaCheck to clear away any JS-imposed inline styles between the main breakpoint of 768px.
Change this code. You need the if statement inside the event handler, otherwise it only binds the event if the width of the window is less than 768px on load.
jQuery("nav p.active").on("click", function(){
if (jQuery(window).width() <= 768) {
jQuery("nav ul").toggle("fast");
}
});
http://codepen.io/anon/pen/BHbon
Related
I'm currently try to write a toggle menu script.
Most of the futures are fine, but...
Here's my bin:
https://jsbin.com/rabiporoji/edit?html,css,js,console,output
I use media query to make a different layout,
the idea is... I tried to make the menu extend under 500px screen width,
and not to change anything when the screen size is wider than 500px.
But while the screen size stretched from small to wider than 500px,
the toggle menu will still extended if i click th button.
ps(in this case the height is fixed, but in the project i'm workin on they are pics with only width fixed in percentage)
So, I'm wondering if there's any way to retrieve the elements height dynamically, every time I change the window size.
I know there might be some js libraries and solve this problem in ease.
But I really wanna know some js basis before I start using those.
TY for your time!
window.addEventListener('resize', function(event){
let height = document.getElementById('thing').offsetHeight;
console.log('offsetHeight',offsetHeight)
});
I'm trying to recreate a menu that can resize the html page (not the browser window) to different sizes in order to "show" how the responsive code works. you can go to this page to see what i mean:
http://switcher.oklerthemes.com/?theme=Porto
I'm trying to recreate the upper menu, the one with the "device images" but i have no idea of how to do it and i can find any good information about this. does anyone have any idea?
One idea would be to wrap all of your code inside of a div with class .container, who's only job is to set the width. Then for each of the buttons, use javascript to resize the width of .container.
Here's an idea using jQuery:
$('#1').click(function(){
$('.container').css('width', '100%')
});
and a fiddle to demonstrate (notice I'm using jQuery for this): http://jsfiddle.net/md98h19c/1/
I've been investigating ways of creating a responive menu.
The standard technique would be to use a navicon on smaller devices which would trigger some kind of fly out/drop down menu.
I would like the most common options to show on screen, so I came up with the idea of a nav-bar, consisting of only a few important menu items, which would be visible on smaller devices. This would still need the navicon to display any additional items.
I then came across a menu which fulfills my requirements better in that it is more dynamic. The concept is that the menu grows as the screen size grows, but only displays an option when there is enough screen width to accomodate it fully. The remaining options are tucked beneath a dynamic navicon.
Here is the menu: http://www.money.co.uk/
As you will see changing the screen width changes the available options.
I could produce a semi-dynamic version using my media query breakpoints, but it would be good to be able to create a fully dynamic version. I'm guessing that it uses javascript - but as far as the techinque to be able to determine the available space and the space required, I don't know where to start.
I have some basic js/jquery knowledge, but would appreciate it if anyone could give me some guidance on how to go about approaching this one.
Thanks in advance.
Responsive menus are nothing, but its just a style manipulation as per screen size. You can go for CSS3 media queries to do it. It has inbuilt functionality to define the screen size.
#media (max-width: 912px) and (min-width: 681px)
Then, you need to manipulate the stylesheet. This is very common approach. Although, you can go with javascript as well by using window resize events and change your stylesheet accordingly. So whenever you will resize the window it will automatically overwrite the defined stylesheet.
Although, it is not recommended to manage it through javascript as it has lots of code complexity while managing the style. Use CSS media queries.
Hope this helps :)
Check it out here: http://bit.ly/16DJQjN
When I resize the window down to a lower resolution, everything is fine, the navigation menu turns into mobile version. But just try to get the page narrower and refresh the page, you'll see the items drop down one after another in an irregular way, just resize it once more, it's perfect again. That way, it doesn't seem alright on lower resolution devices when first opened.
To give you an idea of what it looks like, that's how it looks when the page is opened in this resolution.
But when I just resize it in any way, it looks perfect, see:
I checked the JS and CSS, obviously it's not done with media-queries thing, I believe it's pure jS. How do I fix it? Can you help me?
Add this css to your style sheet this will hide menu until javascript load.
.responsive_nav ul{
display:none;
}
I'm hoping somebody is able to point me in the right direction with what I'm hoping to achieve. I'm building a responsive site, and have a traditional navigation menu spanning the top, with several items inside.
I need for this menu to shrink when the page gets narrower, but rather than the navigation menu breaking I would like for the items that don't fit to go underneath a "More..." drop down tab. Does this make sense? Here's a graphical representation...
So the top image would be what it might look like with 1024 width, and below is the 768 width.
The content in the menu is unknown so the widths would vary, so I'd need to calculate the width of the combined links and then anything more than that would get put underneath the More.. dropdown.
Any tips would be greatly appreciated, just not sure where to start at the moment.
Thanks
Implementing this is quite simple, if the menu can be static and doesn't have to adjust when the window is resized; #skip405's example is a really good solution in this case (+1).
If the implementation has to adjust the menu dynamically on window resize, it get's tricky though... The window.onresize event is fired quite often while the user scales the browser window, so a naive implementation (e.g. #skip405's approach executed on every event) would be too slow/expensive.
I'd solve the problem as follows:
Calculate and add up the outer width of all links at the beginning.
Append all available links to the "more" tab (cloning) so they can be shown/hidden dynamically. This is much faster than creating new (resp. destroying) DOM elements all the time.
Bind a handler to the onresize event. In the handler, get the current menu width and compare it to the width of the links. Hide all links that don't fit in the menu and show their counterparts in the "more" tab. The same goes the other way round for showing links if the menu is wide enough.
Here's my implementation: http://jsfiddle.net/vNqTF/
Just resize the window and see what happens. ;) Note that the solution can still be optimized of course - it's just an example.
Here's a nice jQuery plugin that may solve the problem: https://github.com/352Media/flexMenu
Also be sure to check out a great article providing a step-by-step instructions on how to organize this kind of flexible navigation using the aforementioned flexMenu plugin: http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to-responsive-navigation/
I think my variant may be a starting point for you. I'm a novice in jQuery and am learning a lot myself - so anybody, feel free to correct (and improve) my method or my logic :)
My starting point is here: http://jsfiddle.net/skip405/yN595/1/
To see it in action you need to resize the Result window so that there were 3 or 4 items in a row (not 7) and press Run again. Hover over More to see the rest of them.
In this fiddle I calculate the width of the list items in a loop and compare it with the width of the whole menu. When the calculated width of the items becomes higher than that of the menu - we can get the number of visible lis at the moment.
NB: This code works on document.ready and won't work on resizing of the window yet. So press Run when you resize the window for now.