How do I make menus like these? - javascript

So I'm looking at slickdeals.net and amazon.com, and I found something very intriguing. It's basic for most of you guys out there, but it's new to me. For slickdeals.net, when you click login, a login box pops up like so. Also for Amazon.com, when you hover over the left navigational menus, a new menu pops up! I think it's JavaScript, but how does this work? How can I do something like that?
Update:
Thanks for the answers! One more question about Amazon's website. I've been looking at it with firebug. So how are they making their sub menu appear? I was expecting the mouseover to change the sub menu from display:none; to display: block; but this isn't the case. What is it change on the mouseover to make it appear?

Looks like a combination of CSS and Javascript. Look into JQuery and JQuery UI. It's easy to use and has things that make sites like theses easier to develop.
Look into the UI stuff for the menus and drop-downs and things like that. That JQuery UI is really cool and lets you make really dynamic web pages. They have examples on the JQuery UI site that you can look at.

You can view source to find these answers for yourself. It appears slickdeals.net is using jQuery for its javascript effects.
http://jquery.com/

Related

using javascript to hide and show menu ids

Hi Im using wordpress and i have a navigation.
I would like to use js or jq to toggle the visibility of the sub menu items when clicking on the parent item. I can do this with raw code but i dont know how to do this with wordpress menus.
Currently my wp_nav_menu is in a nav container in its own div.
Any help would be really appreciated. I need this to be totally dynamic.
I have found a plugin called Jin Menu and this seems to allow me to add onclick functions to each menu item but even then im not sure what to add...
Thanks folks
Without looking at your code it is hard to provide samples that you can use directly. jQuery can be used to accomplish this so no worries there. The simplest way without delving deep into advance jQuery selectors (I'm not sure of your background knowledge) is to give each navigation link an id and then use jQuery to hide the div. If you would provide your navigation code, or a link to your page, we could help you more.
$( "#idOfParent" ).on( "click", function () {
$(this).children().toggleClass("HideNav").toggleClass("ShowName");
}
Here is a jfiddle with a working example (though not pretty). If you needed something different, let me know.

how to build a not preload slide show by javascript?

i would like to make a simple slide show like this:
http://www.businessinsider.com/useful-apps-2013-8#quip-is-a-brand-new-mobile-word-processing-app-quip-is-made-by-facebooks-former-cto-the-app-makes-it-easy-to-create-documents-on-the-go-but-it-still-works-on-your-desktop-too-2
i am new to javascript, may i ask is there any example to build a slide show like above?
it seems the picture will only be loaded from the server side when the user click the previous/next button.
and is there any way to speed us the script as well?
many thanks.
The two simplest sliders/gallery plugins are fancybox and flexislider. Their are plenty of tutorials and help online to use these.

dropdown menus javascript

I am completely new to javacsript/jquery and am working on a small app for browsers. I am trying to include dropdown menus like those on Facebook for notifications or new messages. Does anyone have any good starting advice or good references? Thanks!
well basically it's just a divd that displays when you click. So if you're using jQuery you should be able to style the div and then $("#div").show(); I'd say it's more like a submenu than a dropdown.
this should be something to go by
http://sammaye.wordpress.com/2010/01/23/facebook-style-css-jquery-drop-down-menus/
Jquery's LightBox is hugely popular for doing popout menus. I personally prefer to roll my own, but as far as plugins go, lightbox is the breadwinner.

Jquery drop down menu

Does anyone know of a plugin that can help me with a dropdown menu like this site
http://www.ebuyer.com/
when its hovered over a div appears with categories headers and side by side categories.
Thanks.
I don't know if it qualifies as a plug-in, since you'll need to write your own CSS/JavaScript, but the techniques described here seem similar to what you are needing.
There are many plugins that can do things similar.
Have a look at this page that lists several plugins and tutorials: here

Easiest method to implement fancy CSS/Javascript navigation menu in Drupal 6?

I've implemented the required functionality for my Drupal (6.19) web site, and I'm now in a position where I'd like to enhance the look and feel of the site. The current theme is a Zen sub-theme, with minimal modifications.
Can anyone explain what the simplest approach to implement a fancy CSS/Javascript menu, like this?: http://www.sohtanaka.com/web-design/examples/drop-down-menu/. I understand HTML and I have a passive understanding of PHP, SQL and CSS.
Thanks,
Mike
This may be what you're looking for: Nice Menus module and it's documentation.
The configuration is easy as you can see on the screenshot:
Here's a useful link on the subject without using a module like Nice menus or superfish: http://drupal.org/node/190263
If you use this approach be sure under site building > menus > primary links (or whatever menu you're using) you have the "expanded" option checked under the items you want to drop down.

Categories