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.
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 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 want to create a collapsible menu or even better a spry menu using just css/HTML. I want to use it on eBay but javascript/jquery is not allowed. I have seen it on other peoples eBay.
A spry menu would be best but this is probably not possible without javascript
If you are looking for Pure CSS based menu then
try this fiddle http://jsfiddle.net/gajjuthechamp/xYFmh/
Source: http://purecssmenu.com/
You may have a look at 100 Great CSS Menu Tutorials
How do I incorporate the following sidebar menu feature using jQuery where the menu on the left re-appears as the user scrolls down the page?
Here's an example sidebar menu.
There's a really good tutorial over at Nettuts about this exact thing:
Creating a Floating HTML Menu Using jQuery and CSS
Jquery CSS Control:
http://css-tricks.com/scrollfollow-sidebar/
and tutorial is also nice,
if you are using bootstrap then you can use affix control of bootstrap, that is also good
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