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!
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 am looking for an outlook style navigation sidebar for my web application which looks similar to:
I know there are versions of this available as winform controls and through the Visual WebGUI system but these are Microsoft based solutions. What we are looking for is a strictly Javascript & CSS based solution or at the very least server independent. I am aware of similar solutions which have been made in the past which use jQuery's accordian plugin but that results in the sections moving up and down rather than being pinned to the bottom of the navigation bar the way the outlook solution works.
The basics of what we are after is...
Title Bar
Tree Navigation Section
Section Navigation Buttons at Bottom
Section Navigation Buttons Compressable To Single Row (Optional)
Would like to use an existing solution out there if there is one rather than needing to build my own.
Thanks in advance.
Try below links, these will help you to make build expected behavior.
Example- Web Application User Interface as Outlook
Outlook Style Menu With Collapse Side Menu
Most pages on the Magento backend utilise a tabbed interface with the tabs displaying on the left and the content in the main container on the right.
I am looking for a way to change this (product edit for example) to show all the tabs on top of each other with a collapsible accordion.
I have noticed that the admin section does include the accordion effect I am looking for within the config section (ie config->general->countries options).
Does anyone have any tips or pointers on how to remove the left side tabs all together on other pages and have them displayed as a vertical accordion?
Any help would be appreciated.
This is not an answer to your question as much as it is a suggestion.
Magento can do something similar without any programming needy. If you navigate to Catalog → Attributes → Manage Attribute Sets & choose the default option, you'll be able to manage which attributes are editable on a per tab basis.
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 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