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.
Related
Without writing a novel of a backstory, using Swiper, I'm trying to call .toggleClass on an HTML element, whenever one of my swiper slides has the class of swiper-slide-active. This is so that I can have text appear on single slides, instead of all slides at the same time.
Here is a visual of what I'm describing: studioyonis.com — if you click the caption at the bottom so that the project information comes up, then drag RTL, you'll notice that the project information for the second project was also visible for a short time. It disappears (correctly) because of some other code I have, but l would like it to not appear at all (until I click the caption on that slide).
I've been trying this if statement to single out the active slide and help set up a subsequent click function, but its not working and I can't figure it out for the life of me. Can JQuery, for some reason, not see the swiper-slide-active when it happens?
if ($('.swiper-slide').hasClass('swiper-slide-active')) {
$('.overlay-caption', this).toggleClass('overlay-caption-active');
$('.overlay-caption-box', this).toggleClass('overlay-caption-box-active');
};
Here is a sample of my HTML structure. There are ~7 different slides like this, all with overlay-caption and overlay-caption-box classes.
<div class=“swiper-slide”>
<div class=“caption-box information-00”>
<a class=“caption links”>
Text Text Text Text Text Text
</a>
<div class=“overlay-caption-box”>
</div>
</div>
<div class=“overlay-caption”>
<div class=“project-information”>
Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</div>
</div>
Hopefully this makes sense! Been a long 10-12 hours of work on this site today, only to realize this problem near the end of the night.
Cheers!
Instead of changing the display, I just locked swiping to different slides while the project information is visible. That way the user doesn't know all of the captions are open because s/he can't scroll to them. This forces the user to slow down and look at each project, instead of quickly swiping through. Since its a portfolio site, maybe thats a good thing in this case.
I am trying to build a MEGA MENU using jquery and css using the following code:
$(".sub-menu").find('a.amenu').hover(function(){
$(this).parent().find(".sub-menu-panel").show();
}
,function(){
$(this).parent().find(".sub-menu-panel").hide();
}
);
where the menu links has a class called "sub-menu" and the panel related to it has a class called "sub-menu-panel".
How to keep the related panel of a menu link visible if the mouse hover it ?
my problem is when i move the mouse over a panel to click any sub-link on it the panel it self disapeared because the mouse out event fired when i leave the main link.
Firstly - providing an example of what you're trying to explain would be advantageous to getting a working response.
Secondly - you shouldn't need any javascript/jQuery to show a submenu on hover - a simple :hover mechanic in CSS should give you the effect you want.
I am trying to implement a javascript toggle effect for my "small" or mobile sized version of a responsive site. I am using my own custom WordPress theme.
I'm trying to use the script from this article: http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial/comment-page-1
The tricky part is that I'm trying to include several divs, not just a single nav. If you look at the site now (which is still under construction), at:
http://66.147.244.81/~assureva/
and reduce your browser window to narrower than 540px, you'll see that I've managed to get my top navbar (smallnav), 2 "login" links, and facebook and LinkedIn icons, all to disappear, and re-appear when pressing the "main menu" button that now appears at the top, to the right of the logo. But I can't seem to add in the last part, which is the 4 links that comprise the main "nav". I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div, but the "smallnav", "logins" and "socialcons" divs all combine as desired in the "mobimenubg" div.
If I go ahead and set the "navbar" div to "display:none" it will disappear but it won't re-appear when I click the "main menu" button.
So I think the answer to ask the javascript to include the "mobimenubg" div AND the "navbar" div (the "navbar div is a container that includes the actual "nav") but I don't know how to write it properly.
Here's the javascript:
<script type="text/javascript">
jQuery(document).ready(function($)
{/* prepend menu icon */
$('#mobimenuwrap').prepend('<div id="menu-icon">Main Menu</div>');
/* toggle nav */
$("#menu-icon").on("click", function(){
$("#mobimenubg").slideToggle();
$(this).toggleClass("active");
});
});
</script>
Can someone tell me how add the navbar div? Do I add another line after:
$("#mobimenubg").slideToggle();
or can I include it in the parens:
$("#mobimenubg" IN HERE?).slideToggle();
I don't know the conventions -
Help greatly appreciated!!
I've wrapped the entire area in a div (mobimenubg), but the main navbar acts like it isn't in that div,
You actually have the right code, but your HTML structure is off. The navbar div is not contained within the mobimenubg div, and that is the problem. Just make sure to nest navbar there, or otherwise I think you can also call the function on the navbar like:
$("#navbar").slideToggle();
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/
Effect I want . Basically I want to popup a simple menu when the user mouseovers a link .
I tried several ready made scripts , but had trouble integrating them with my site. SO decided to built my own.
here is what I am trying to do:
<li onmouseover=showlist1() onmouseout=hidelist1() ><a class="navigation" href="show_delhi_items.php">Menu heading</a></li>
function showlist1() //onmouseover
{
document.getElementById('list1').style.visibility='visible' ;
}
function hidelist1() //onmouseout
{
if (menu elements don't have focus)
{
document.getElementById('list1').style.visibility='hidden' ;
}
}
now in this how do I implement the 'menu elements don't have focus' part ? I know its not possible to know which elemtn has focus. so I need an alternative. Basically the problem is that as soon as the mouse moves outside the main link(the link that popups the hidden menu), the menu hides. what i want is for the menu to remain visible if it gets focus. but currently it gets hidden as soon as the mouse outside our main link
hope I was clear enough.
Make the menu overlap the list item that has the onmouseover menu. Then only close the menu if the mouse is outside both the list item and the menu. You will have to use:
position: absolute;
top: some-y-value;
left: some-x-value;
Hmm now I made that comment i better back it up with an actual way of doing it :)
Go here and read all about suckerfish dropdowns
Go here to see an example implementation