I want to make a menu for the admin side of a website and when I saw the top bar of stubleupon I wanted to make a menu with same style, always on top even when you scroll down, and has drop down items.
here is the link to sumbleupon exemple :
http://www.stumbleupon.com/su/2qQfq3/www.thevirtualpiano.com/
and I am not very good in javascript so if anybody can point me where I can find a resource
or if there is any jquery plugins that does this work it would be great.
You don't have to use javascript if you didn't want to.
A navigation you want could be done in CSS only.
But here are my favourites:
multi level navigation examples
38 jQuery drop down
Related
I want to be able to click links in my top bar to display different content. Do I need to explicitly use data-toggler on each tag in my top bar?This seems crazy. Is there an easier way to achieve the navigation I am looking for? Similar to the switcher for uikit? Thanks in advance as I am very new to the foundation.
You can put the dropdown menus in the wrappers that will be toggling their opacity/visibility so that when you :hover over the element, the menu will appear below it or wherever you want for it to as a matter of fact.
Here's the pen.
The behavior of Switcher reminds me of the tabs element of Foundation (Tabs | Foundation for Sites 6 Docs). Unlike the dropdown, the Tabs element remains visible after you click it, even if the mouse pointer moves out.
I'm currently developing a plugin that enabled me to mimic the Office Ribbon interface for web applications.
Now, everything up now is functional, but I want to add some animation to it, just as in the original Ribbon.
For people who have Outlook 2013, you can see the behaviour what I mean:
When you click on item that has a dropdown (f.e. "New items") the dropdown comes fly in from the top.
Now, I have created a dropdown myself which become visible by clicking on the icon, but this is without animation (just display block).
Can someone provide me the code I need to make it fly in from the top?
You can find the fiddle here: http://jsfiddle.net/Complexity/nf7Lr/
my menu is decorated with the following class:
<div class="menu" id="mnuCleanUp">
So, I want the menu to fly in from the top (just under the clicked button).
Kind regards,
Kevin
To show the menu
$("#mnuCleanUp").slideDown("slow");
and to hide it back
$("#mnuCleanUp").slideUp("slow");
Jquery has built in method to have smooth appear/disappear
Have you check : http://api.jquery.com/fadein/
The easing attribute let you choose different effects : http://jqueryui.com/resources/demos/effect/easing.html
I have to reproduce menu of the winston.com website. It also has to work with wordpress, and I found the UberMenu but its sort of a personal project and I don`t want to spent money on plugins.
The website is built on bootstrap, and i found the next plugin: yamm 3 ( website ), but I simply cannot reproduce the menu from winston.com.
I also want it to be built on bootstrap, so if someone could help me make a reproduction with that YAMM3 plugin, it would be great!
Its pretty basic, you should start with an on hover event. With this event just "show" the menu which is hidden at first. On this menu add a transaction effect http://api.jquery.com/category/effects/
Start of with a simple div that has the correct position after your menu items. Then try to implement a jquery/javascript function to show/hide the correct menu item. After that add a transaction effect. Keep it simple first, aka use some basic colors and widths to understand how this dropdown menu works. After that, just extend/improve it to make it look like your example.
I'm working on this site http://fridasofia.se/wand/ and have used JavaScript to mark the current menu item with an arrow.
The problem is that if you use the scrollbar to scroll the page, instead of clicking the menu, the arrow that marks current menu item doesn't follow. How do I make it work?
Thanks /Frida
Such plugins called ScrollSpy. Here is most popular
Bootstrap
jquery-scrollspy
I recommend looking at the jQuery Waypoint plugin http://imakewebthings.com/jquery-waypoints/
It should have what you need.
I have styles with CSS the ootb (out of the box) top navigation in Shrepoint 2010. However I also want to add icons (.png images) for ech navigation manu itme. So for exapmple for Home I will like to an icon next to it, for About Us again another icon next to it and so on for Practices, Sectors, Our Events, Our People, Publications and Working for Us.
SharePoint 2010 basically builds the top navigation by using asp controls. I can see the in firebug(Firefox) and developer tools (IE) the HTML for the top navigation hwoever on the master page this is not visible.
What is th best way include icons in the top navigation items?
Thank in advance
You need to build your own asp.net control if you are going to customise this part of the menu I'm afraid. OOTB you can only alter the CSS and (limitedly) control what is shown. You can use the same DataSource if you wish for the SharePoint UI to remain in control.
I had the same problem with a site I am working on. I wanted to add individual icons to each main menu item but had no way to target them.
To get around this without creating a custom control I used jQuery to add a class that increments based on the number of menu items and then used this class to apply styles in my CSS.
$("a.menu-item").each(function(i) {
$(this).addClass("nav-" + (i+1));
});
Hope this helps you out!