Can anyone provide me with a link to a tutorial or plugin, preferably in jQuery that will allow me to create a menu that not only collapses vertically (jQueryUI's Accordian), but also collapses horizontally? No matter what I google, all I can find are the vertical ones, and the Wordpress one is super-integrated to its core, as far as I can tell.
EDIT: Here are some screenshots. The first is normal, the second is expanded / collapsed vertically, the third is collapsed horizontally.
Try jQuery UI i think thats what WP uses
http://jqueryui.com/
You can use a plugin like Accordion or Collapsible Menu (a bit more wordpress like) for the vertical collapse, and then put that menu in a div that can collapse horizontally with a plugin like TabSlideOut. Or just change the width of the menu DIV with .animate().
Also notice how the wordpress removes the text from the menus but leaves the icons.
html
<div class="hide-menu">Hide Menu</div>
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>
<ul class="subs"><li>Subs</li></ul>
</li>
</ul>
jQuery
$('.hide-menu').bind('click',function (){
$('#menu').animate({width:30});//can always extend this.
//u can use the if statement or toggle if u need toggling feature
});
$('#menu').children('li').bind('click',function (){
//here u can hide the subs
})
now ofcourse the above is not going to work exactly like wordpress or may not work at all but you get the idea :) I hope
I will toggle a class, as you can see there is an arrow that toggles horizontaly. So, just add or remove class and with CSS make the effect done, like this:
$(mi-button).click(function(e){
$(mi-menu-selector).toggleClass(your-class);
e.preventDefault;
});
with Css show or hide the text of each li of your menu.
.hide-horizontal{
text-indent:-999em;
}
You need to use responsive design to achieve this.
You can use CSS media queries:
http://en.wikipedia.org/wiki/Responsive_Web_Design
http://mediaqueri.es/
Related
I've got a page using gsap to animate scrolling.
To navigate, the menu is setup with a simple "scroll to ID" approach which is intercepted by gsap to do the scrolling.
This works as expected to scroll down the page, but not up the page. However if you've scrolled down the page, selecting the element above from the menu doesn't scroll up. But selecting an element 2 up from the current one, then scrolls up 1 element.
An example of the code;
<nav>
<ul>
<li>Section 1</li>
<li>Section 2</li>
</ul>
</nav>
<section id="section1" class="panel">
</section>
gsap.utils.toArray("nav a").forEach(function(a) {
a.addEventListener("click", function(e) {
e.preventDefault();
gsap.to(window, {duration: 1, scrollTo: e.target.getAttribute("href")});
});
});
A demo is here on codepen
This is a logical issue. Once you've scrolled past a section, the element has been moved down by 100vh. So when you navigate to its y offset, it's 100vh below where it was at the start.
There are different ways to fix it. The easiest may be to keep an array of values of the original offset and scrollTo those values instead. Demo.
Sides notes:
You can just use the selector strings as your targets in GSAP when you don't need it scoped further.
You should use a double colon (::) for pseudo-elements in CSS.
If you're going to use ES6 features like const some places, you might as well use them throughout your code.
You're more likely to get help even quicker in the GreenSock forums.
Thanks for looking at my post - I'm trying to figure out how to make this dropdown menu close upon clicking a link but my javascript skills are sorely lacking and the code seems to be obfuscated. This is the HTML:
<nav class="site-nav" role="navigation">
<ul class="pos-ul">
<li>Menu</li>
<li>Wine + Cocktails</li>
</ul>
Menu
</nav>
And the minified javascript I think is controlling it is at http://sabiopleasanton.com/js/core.min.js
The website in question is http://sabiopleasanton.com and the dropdown menu appears when the screen width is below 768px. Thank you for any consideration at all, I apologize for any lack of clarity or shortcomings re: posting protocol.
I remember helping you with the slider transition on this page the other day. Anyway, this is what you need:
$(document).ready(function() {
if ($(window).width() <= 768) {
$('ul.pos-ul > li > a').click(function() {
$('.pos-ul').hide()
});
}
});
It'll select an anchor tag within the mobile nav, on click it'll hide the dropdown unordered list. Just edited it to wrap it in a document ready function, shorten the selector and make sure it only fires when the viewport is 768px or less.
I am trying to implement a similar menu behavior as on Harvard's website: http://www.seas.harvard.edu/computer-science
where all the sections drop down no matter which link you put the mouse over.
Does anybody know what they are using for that? The closest I could find is the jQuery Superfish menu, but it only allows to open one menu section at a time.
Thank you in advance!
I've created a demo on JSFiddle which portrays what I was talking about in my comment. The particular result you are looking for is a simple modification of a normal drop down menu. Instead of having each of the drop downs be their own separate divs, you put them in a container div and display it when a drop down is needed.
So instead of:
<div id="drpDwn1"></div>
<div id="drpDwn2"></div>
<div id="drpDwn3"></div>
You'd have:
<div id="drpDwnFull">
<div id="drpDwn1"></div>
<div id="drpDwn2"></div>
<div id="drpDwn3"></div>
</div>
You would change the visibility on drpDwnFull instead of the individual items to get the full menu effect.
Then you can add highlighting as you wish. In my Demo I chose to highlight the menu associated with the menu item, as well as the individual item you are hovering over.
I am trying to create a horizontal menu that has at least two levels of submenus. All submenus are vertical.
Submenu1 will be directly below its parent.
All subsequent submenu levels (2+) should be to the right of its parent.
I am just starting to learn how to use jQuery menu, and they don't seem to have a customization for this. I am not sure how to approach this... I tried and failed to call .menu() on $("#myMenu .level1").
My question is - I would much appreciate if someone can point me in the right direction on how to make the menu as I have stated above.
Javascript snippet
<script>
$(function() {
$("#myMenu").menu({
position: {
my: "left top",
at: "left bottom"
}
});
});
</script>
HTML snippet
<ui id="myMenu">
<li class="level1">
Item 1
<ul>
<li class="level2">
Item 1
<ul>
<li class="level3">
Item 1
</li>
</ul>
</li>
</ul>
</li>
Update: JSbin
Hi finally i have an answer for your question. Using some properties of the menu like blur and focus. I found this page that already has the solution http://forum.jquery.com/topic/how-to-make-the-perfect-horizontal-menu. I studied those lines and applied it in your code. If you have any question about the functionality feel free to ask.
Review the new code here http://jsbin.com/uxuTAba/5/.
Psuedocode:
On mouseover of Menu Item, slidedown List (positioned right under Menu Item)
On mouseover of List Element, slidedown List Element X's Submenu (positioned to the right of X)
Basically what I am saying is, to position your menus with CSS and then use slideDown() and slideUp() to display them dynamically. So the menus positioning does not need to be determined with the jQuery at all -- just the display status of sliding them up/down. But they're all positioned relative to the menu, with your base CSS.
I am using jquery toggle plugin along with the smoothscroll plugin on a single page website. now, the problem is that the hidden text in the toggle function is not allowing the smoothscroll jquery to function properly. suppose we click 'item a' in the nav option and it is supposed to scroll to the 'item a' section div in a smooth manner, it does so haphazardly and also takes into account the height of the hidden text in toggle function which is about 100px. Hence, there is neither a smooth scroll but also a difference of 100px of the desired result.
For reference, i am using html5 and have 4 sections on the page, as provided in code below.
Here is the code for toggle function:
`$(document).ready(function(){
//Hide the tooglebox when page load
$(".togglebox").hide();
//slide up and down when click over heading 2
$("h2").click(function(){
// slide toggle effect set to slow you can set it to fast too.
$(this).toggleClass("active").next(".togglebox").slideToggle("slow");
return true;
});
});`
here is the code for navigation menu (supposed to scroll on the same page):
<nav>
<ul>
<li>Home</li>
<li>Our Works</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
i am using the smoothscroll plugin located at:http://css-tricks.com/snippets/jquery/smooth-scrolling/
can someone please guide me why these 2 jquery are clashing.
PS: i am also using a jquery slideshow, but that has no effect as far as i can tell, coz i removed that, and nothing changed.
It's difficult to tell based on what you've posted, but using the .hide() method, which is comparable to setting the CSS property to display: none, could cause the browser to incorrectly calculate height. I would try setting visibility: hidden , and then when active visibility: visible.