What I want to do is to split-up the globalnavigation bar on the sharepoint 2010 so I can control what menu-items should be floated to the left or right of the bar.
Is there a way to do this without a complete customized version of it, so I only have to edit the current one. Or do I actually have to make a complete new one?
What I have tried so far is just copying all of the UL > LI's there's used to display the menu-items like this:
<div class="s4-tn">
<div class="menu horizontal menu-horizontal">
<ul class="static">
<li class="static dynamic-children">
<a href="#" CssClass="static dynamic-children menu-item">
<span class="additional-background">
<span class="menu-item-text">Custom Dropdown</span>
</span>
</a>
<ul class="dynamic">
<li class="dynamic">
<a href="#" class="dynamic menu-item">
<span class="additional-background">
<span class="menu-item-text">Test subsite</span>
</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
But it doesn't seem to trigger the dropdown functionality. Might just be a naive attempt.
Any links to guides or tutorials about this subject would be a great help.
For future reference, here's the content from the linked blogpost.
This uses an asp:Repeater instead of a sharepoint:AspMenu as the former allows much cleaner html and better styling. Also I've created several datasources on the masterpage which return the correct items I need to display.
<asp:Repeater ID="TopMenu" runat="server" DataSourceID="selectedSiteMap">
<HeaderTemplate>
<ul id="main_menu_ul" class="">
</HeaderTemplate>
<ItemTemplate>
<li><a href="<%# Eval("Url")%>" class="link">
<%# Eval("Title")%></a></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
<asp:SiteMapDataSource SiteMapProvider="CombinedNavSiteMapProvider" ShowStartingNode="false"
StartFromCurrentNode="false" StartingNodeOffset="0" StartingNodeUrl="sid:1002"
EnableViewState="true" ID="selectedSiteMap" runat="server" />
I found out which datasources to use with a little help of this post: http://ktskumar.wordpress.com/2008/04/14/sharepoint-navigation-providers-part-1/
They are listed for SharePoint 2007, but most work for 2010 also.
Using several repeaters and datasources on the page you can create a very clean menu. Along with some javascript and css styling you can create every menu you want.
Related
Nested Link is not routing it as forwarding to parent one always, here is sample code as.. seems like angular 2/4 don't support this approach or might be something wrong with my tag, with href is it working.
<ul>
<li> <a [routerLink]=['about']> </a>
<ul>
<li <a [routerLink]=['about/test']> </a> </li>
</ul>
</li>
</ul>
To use anchor tags in angular 2 you need to use fragment.
Like this.
<a [routerLink]=['about'] fragment='test'> </a>
I'm trying to create an Asp.Net page (without razor) to list and show some products from a database. I need image, explanation and PDF path to show from my SQL Server 2008 R2 database.
I have been looking for examples but many of them are about filling tables, not ul elements. I have seen some razor page examples but I have no idea how that works.
Note: I don't want to change this style, because I used some cool bootstrap css hover things. I don't want to mess with that, but if you think it is necessary to change it, then of course I can figure out something.
Code:
<ul class="grid cs-style-5" id="thumbs">
<li>
<figure>
<img class="img-responsive" src="#">
<figcaption>
<h4>Product Name/h4>
<span>Explanation here.</span>
Technical Info
</figcaption>
</figure>
</li>
</ul>
Update:
I figured out how to do what I needed. I am posting here in case someone else needs too. I didn't use asp:repeater but I used DataList. It worked perfectly.
Fixed Code:
<asp:DataList ID="DataList1" runat="server">
<HeaderTemplate><ul class="grid cs-style-5" id="thumbs"></HeaderTemplate>
<ItemTemplate>
<li>
<figure>
<img class="img-responsive" src='<%# Eval("urun_resim") %>' />
<figcaption>
<h4>Product Name: <%#Eval("urun_isim") %>i</h4> <br />
</figcaption>
</figure>
</li>
</ItemTemplate>
<FooterTemplate></ul></FooterTemplate>
</asp:DataList>
Repeater is good option. I agree with that solution. Even this will help you for responsive design. This is even light weight to load.
The code:
<nav class='secondary-nav container'>
<ul>
<li>Customer Care</li>
<li class='dropdown'>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Home
<b class='caret'></b>
</a>
<ul class='dropdown-menu'>
<li>
Google
</li>
</ul>
</li>
<li>Sign Out</li>
</ul>
</nav>
I have jQuery, bootstrap-dropdown.js, and bootstrap.css incuded. jQuery is included before everything.
The dropdown menu is appearing by default before a mouse click or hover on the list element.
screenshot - http://cl.ly/image/41122D2Z3R38
Anyone know why?
Thanks!
Try This :
$('.dropdown-toggle').dropdown();
The thing without your css code we can not understand your problem.
But as I can see, you data attribute is correctly used, but are you linking you javascript files correctly?
"bootsrtap.js" and "Your jquery File"
The second thing look out on your javascript applying code.
The applying code of the nav menu of bootsrtap is :
$('.dropdown-toggle').dropdown();
try to revise your file codes and I think this will help you ^_^
What would be prefered semantic and accessible markup for this divider list?
I'm using jQuery mobile for a project and it uses this mark-up
<ul data-role="listview" data-dividertheme="d" data-inset="true">
<li data-role="list-divider">A</li>
<li>Adam Kinkaid</li>
<li>Alex Wickerham</li>
<li>Avery Johnson</li>
<li data-role="list-divider">B</li>
<li>Bob Cabot</li>
<li data-role="list-divider">C</li>
<li>Caleb Booth</li>
<li>Christopher Adams</li>
</ul>
I think for dividers (A,B,C...) HTML Heading tags should be used.
Definately not ul since it is aplhabetical it should be either ol with list-style-type:upper-alpha; with nested list.
I would go with a html something like:
<ol>
<li>
<ul>
<li>Adam</li>
<li>Alan</li>
</ul>
</li>
</ol>
Sample: http://jsfiddle.net/easwee/8UUbh/5/
I would use a definition list
<dl data-role="listview" data-dividertheme="d" data-inset="true">
<dt data-role="list-divider">A</dt>
<dd>blblblaba</dd>
</dl>
I know that the titles are not definition titles, but its clear what elements are the dividers and what elements are the contents.
edit i think #easwee's solution is much better in a semantic point of view.
I have an (unordered)list (generated by a repeater) of items. However, I'd like to show the first three items, and have the rest hidden by the main content div. When a button is pressed, I would like the list's div to expand, pushing the main content div down and showing the rest of the list. I was thinking of using slideDown(), but that closes the entire div ( and I would like to show the first 3 items of the list). What would be the best way to achieve an effect like this? Is there a plugin that can easily show X items of a list and the display the rest upon request?
Thanks
edit: Adding current code:
<div id="name_links">
<asp:Repeater ID="rptName" runat="server">
<ItemTemplate>
<ul class="ul_links">
<li>
<a id="aName" runat="server" href=<%# Eval("Name")%> >
<%# Eval("Name")%>
</a>
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
</div>
<div id="main_content" >
...
</div>
I've tried to add this JQuery, but it doesn't seem to pick up any of the links:
$("ul.ul_links").each(function() {
$(this).children("li:gt(3)").hide();
alert("Testing"); //This never gets called.
});
You item template looks wrong
It should be
<div id="name_links">
<ul class="ul_links">
<asp:Repeater ID="rptName" runat="server">
<ItemTemplate>
<li>
<a id="aName" runat="server" href=<%# Eval("Name")%> ><%# Eval("Name")%>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
Then jquery will be able to show and hide as desired.
The other way you were creating sets of ul -> li tags .
This can be done with jQuery, but it would help to see example of your markup.
Here's a link showing how you could do it with ul/li tags. You should be able to adapt it to your own markup without too much trouble.
Typically you hide item 4 and out with:
$('div:gt(2)').hide(); //index starts at 0
You have to modify the jquery selector to fit your markup and you could put it in a $(document).ready() block in order to hide the items on page load.