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.
Related
On my site I'm currently having users click on a set of navigation links that will, onclick, highlight their backgrounds yellow.
I remember seeing a similar effect on this site at http://docs.meteor.com/
Here, when user scrolls to a specific anchor in the document, the navigation element that links to it is highlighted. How does this work? How do I begin to implement something like this on my page?
Any brief pieces of example code would be greatly appreciated. I've been working with some JavaScript for a while now and haven't been able to recreate anything.
EDIT: To clarify the effect I'm looking at on the Meteor site, when you scroll in the right column, the associated menu element on the left column changes font color to red. NOT, the on hover effect.
There is ready thing for that in bootstrap called scrollspy
I'd like to create sidebar navigation with subnavigation that appears when a user enters the parent section on the page:
eg https://parse.com/docs/ios_guide#queries/iOS
I think the way to do it with bootstrap is a combination of the affix, scrollspy and collapse plugins, but I'm not sure how to fire the correct collapse event when the user scrolls into or clicks into the correct parent section.
For anyone else wondering, I ended up using the Tocify plugin. Not exactly what I had in mind, but does what I needed.
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!
Okay, so I've got two drop-down menus on my page, Navigation, and Links. Links works normally, but Navigation disappears when I try to hover over it. I got no idea why, so I'm asking.
Why does my Navigation menu disappear when I hover over it, and how do I fix it?
My site with the error
You have an element that's hanging over the left menu named #crwrap. So when moving your mouse to the Navigation options, the mouseout is triggered because you're suddenly hovering the #crwrap element instead of the Navigation menu. It's invisible but if you use a debugging tool that supports DOM searching you'll see it covering the area of the Navigation menu options.
It's not covering the Links menu so that one does not have any problems.
If you remove #crwrap (or move it to the background using z-index: -999), it works fine for me.
Your JS to show the menus is toggled by mouseover and mouseout of the elements in your menu section. The submenus are not nested inside these elements. Therefore, when you move the mouse down toward the submenu, you trigger the mouseout on the main menu item, which is hiding the submenu.
I would recommend nesting the submenu items inside the main menu item's container.
I would also advise you check out the excellent alistapart.com article about CSS hybrid menus. It has some excellent pointers and techniques you might find useful.
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