I am trying to edit the SharePoint 2010 ribbon to add links along side the tabs. So I would want to just have elements exactly to the right of the 'Browse' and 'Page' tabs. It should look like they are other tabs, but they will function like links.
I have searched the web extensively to try and accommodate this, and I'm not sure if the answer is editing a custom master page or deploying something through Visual Studio. Either way, I am unable to get something to appear up in that area.
Below is a screen shot of what this might look like.
Also, any help with moving the user and their menu to the left would also be much appreciated.
SharePoint won't allow you to modify the ribbon in this way. You will have to use jQuery or similar to add a new list item (li) to the tabs unordered list (ul). You can find the list with firebug:
<ul class="ms-cui-tts" unselectable="on" role="tablist">
<li class="ms-cui-tt" id="Ribbon.Read-title" unselectable="on" role="tab">
<li class="ms-cui-tt" id="Ribbon.WebPartPage-title" unselectable="on" role="tab">
</ul>
Please note that this kind of solutions are not recommendable (Hard to maintain, unsupported, and this probably won't work in the next version of SharePoint).
To move the user and the menu to the left, just rearrange the controls in a copy of the v4 master page through SharePoint designer.
#alfonso is right. Just to add more for others who might want to add the tabs using jQuery
$('<li class="ms-cui-tt ms-browseTab" style="line-height" unselectable="on" role="tab"><a class="ms-cui-tt-a"><span class="ms-cui-tt-span">You custom link here</span></a></li>').appendTo('ul[role="tablist"]');
That will add an item to the right of the "page" tab
Related
I frequently have use cases in my application where i need a list of items which need to be interactive, like clicking on an item should perform some action.
I usually wrap up the list item (li) content in a button, which kinda makes sense as the list item is interactive. This also helps with making the list items keyboard accessible with TAB. But, as much as i understand, this also poses a problem that a keyboard user would have to TAB through the whole list to get out off it. Would it be better instead to manage focus in the list using something like roving tabindex and allow ARROW keys for navigation within the list and TAB to focus in and out of the list ?
I am seeking validation for whether or not this is a good way to implement this kind of functionality, and pointers to any real world implementations
My real world experience is that you shouldn't put anything inside a button which is not related to a button semantic role. And strictly speaking, you shouldn't put list items inside anything that isn't a list.
Putting the buttons inside the list items would be better, but read on.
A list of items that 'perform some action' is (semantically) a menu, (or perhaps a toolbar which is much like a menu, but doesn't have the open/close feature expected of menus).
So you should get good results if you put role="menu" on the element containing the buttons, and role="menuitem" on the buttons.
Don't put the button that opens the menu (the "menu button") inside the menu. (I've wasted a lot of time on this).
There is no "menubutton" role. Just use an html <button> or something else with role="button". Then associate the menu button with the menu using aria-controls="yourMenuID". There are some other aria attributes you should use too, such as aria-expanded="true"/"false" (on both menu and menu button - and kept in sync with javaScript) and aria-haspopup="true" on the menu button.
If you take a little care, you can use CSS attribute selectors to style the menu according to the aria attributes. For example:
*[role='menu'][aria-expanded='false'] {
display:none;
}
*[role='menu'][aria-expanded='true'] {
display:block;
}
And yes, you should manage focus. Either with the roving tabindex technique or aria-activedescendant. I prefer the latter because it makes things more explicit but roving tabindex seems slightly more common. Both techniques are well-supported across a range of browser/AT combinations.
There are clear recommendations for how accessible menus should behave (with links to example code) here. Menu button and toolbar behavior is described further down in the same document. It's an excellent resource.
Good luck.
Right now I am working on the website of a project working with handicapped people and looking for a mobile navigation with great accessibility and a no-js fallback. First i was thinking about using the :target-pseudoclass to open and close the navigation, but I cant open a sub-navigation this way since the main-nav closes if it looses the target. Then I was looking at the checkbox hack but there I get a roblem with the accessibility since Checkboxes or Radio-Buttons have another use case, a different way of control and also they are form elements, you should not use outside a form. Is there any clean and accessible way to get such a navigation working?
I hve a navigation like thw following:
<nav>
<ul>
<li>
Link
<ul class="sub-menu">
<li>
</li>
</ul>
</li>
</ul>
</nav>
The navigation can be quite big so I dont want the sub menus to be visible the whole time (if possible), so that you dont need to scroll such along time.
This is not a question to give me the exact code, I just need some hints to find a way for an easy accessible no-js mobile navigation with sub-menus (maybe with an example)
(navigation layout picture)
I have the navigation-layout of tabs and sub-tabs, which i want to make accessible via text-reader/lynx. It consists of the main pages "Startseite", "Über", "Interessant", "Orte", as well as the sub-pages "Linköping", "München" and "Baustelle". The logical structure would thus be:
Startseite
Über
Interessant
Linköping
München
Baustelle
Orte
But since I use a layout of several div-tags, it only yields this in lynx:
Startseite
Über
Interessant
Linköping
München
Baustelle
Orte
The questions (or solutions I don't know how to implement yet) now are:
(1) how do I improve my layout to make it accessible via text-reader/lynx
... or
(2) how do I adjust a layout of unorderd lists and sub-lists (see code) too look like my current tabbed navigation-layout?
<nav>
<ul id="mainpages">
<li>Startseite</li>
<li>Über</li>
<li>Interessant
<ul id="sub1">
<li>Linköping</li>
<li>München</li>
<li>Baustelle</li>
</ul>
</li>
<li>Orte</li>
</ul>
</nav>
keep in mind that my main tasks is making it text-reader/lynx accessible. I though of using a layout like this, since it is easily styled with #some_ul_id {display: inline-block}:
<nav>
<ul id="mainpages">
<li>Startseite</li>
<li>Über</li>
<li>Interessant</li>
<li>Orte</li>
</ul>
<ul id="sub1">
<li>Linköping</li>
<li>München</li>
<li>Baustelle</li>
</ul>
</nav>
My third question is:
(3) Is this good practice? Should I do it?
It is the easiest way, though solution (2) would be nicer, since it is more logical.
From an accessibility perspective, the way to markup the solution so that it semantically represents what you are trying to achieve is to use the WAI-ARIA menubar, menu and the various menuitem roles. You should also use the aria-haspopup="true" attribute to show sub-menus and the aria-expanded attribute to track when the menu is expanded. In order to achieve the semantic markup of the hierarchy, you will want to have hierarchical lists as this is the easiest way to represent the hierarchy in an understandable way.
Here is a link to a full dynamic ARIA menu example http://dylanb.github.io/bower_components/a11yfy/examples/menu.html
You will need to ensure that each menu item is keyboard focusable using an href attribute on an anchor tag will do this for you as long as you look for the 'click' event and don't do anything funky with mousedown/mouseup etc.
One way to achieve this could be to absolutely position the sub-menu – of course that requires that you know beforehand that there’ll be enough space, so that items don’t go over multiple lines (resp. you have an alternative at hand for smaller screens via media queries).
So you would position the outer ul (or the nav itself) relative, and then on :hover over a main menu item you make the sub-ul visible, that is positioned absolutely in such a way that it comes to lay underneath the line of main menu items – like this: http://jsfiddle.net/0rpyLqtn/
Other slight variations are easily imaginable; if you don’t want “blank space” underneath the single line of main menu items, you could f.e. give that ul a border-bottom instead of a margin-bottom, and have the border color of it visible at all times, like this: http://jsfiddle.net/0rpyLqtn/1/
Since you have accessibility in mind, you might also want to pay attention to how this kind of menu behaves on devices that do not have a “mouse” as input device. Getting such a menu to be accessible via keyboard can be tricky, and on touchscreens a menu based on :hover might not work that well either. Anyhow, such issues have been discussed on the net already, so with a little research you should be able to find solutions/workarounds for these issues as well.
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
I want to apply 3 tabs for a common way to partition lists.
How can I improve my view and also add the way a tab gets to the foreground like in the link? I could read the html / css from the link to learn how it swtiches between the three categories and looks more like tabs than my effort.
The difficulty for me is styling the tabs named "All", "Private", "Company". Could you help me? My website which uses a http get parameter f=c for company view and f=p for private view which correctly fetches the apprioriate subset but at the moment doesn't change the layout which it should to look more professional.
Update: The above looked terrible so I've styled it and I want also to add dynamics with a tabs URL parameter.
You're very close. Mark the active tab with a css class like <li class="active"> then assign that class a different background color (like white) and no bottom border. Then it will appear to merge in with the content beneath.
use jQueryUI tabs see demo here
easy to use, easy to style, all the functionality you could want :)