Asked By
grace burns
0 points
N/A
Posted on - 11/08/2011
I have tried making fly out menus used as customized top navigation using SharePoint, so I know that this is possible. The list had the following: name, link, ID, and parent ID for lower level links. I need help in reproducing this.
Creating Flyout Menu Navigation using SharePoint list
We can make this fly out in sharepoint using Jqueries. Here is the standard code through which we can do this. I am sharing you the code. You can type this code to make the flyouts in sharepoint. Here is the code
<script type='text/javascript'>
$(document).ready(function() {
$("div.ms-quicklaunch-navmgr li.static > ul.static").parent().mouseenter(function() {
$(this).children("ul:first").css({"left":$(this).position().left + $(this).width()-15,"top":$(this).position().top}).show();
}).mouseleave(function() {
$(this).children("ul:first").hide();
});
});
</script>
<style type='text/css'>
div.ms-quicklaunch-navmgr li.static > ul.static {
display:none;
background-color:#fff !important;
border:1px #00557B solid;
z-index:9999;
position:absolute;
}
div.ms-quicklaunch-navmgr a:hover {
text-decoration:none;
}
</style>
Creating Flyout Menu Navigation using SharePoint list
Hello,
Here I am showing you step by step how to reproduce fly out menus used as customized top navigation using SharePoint.
1. You must have to load jQueryon the site.
2. Now write down the following code into a content Editor Web port which will be show into the master page. You can also submit this code as a attachment file.
<script type='text/javascript'>
$(document).ready(function() {
$("div.ms-quicklaunch-navmgr li.static > ul.static").parent().mouseenter(function() {
$(this).children("ul:first").css({"left":$(this).position().left + $(this).width()-15,"top":$(this).position().top}).show();
}).mouseleave(function() {
$(this).children("ul:first").hide();
});
});
</script>
3. To make the menu stylish and hide links use CSS.
<style type='text/css'>
div.ms-quicklaunch-navmgr li.static > ul.static {
display:none;
background-color:#fff !important;
border:1px #00557B solid;
z-index:9999;
position:absolute;
}
div.ms-quicklaunch-navmgr a:hover {
text-decoration:none;
}
</style>
Creating Flyout Menu Navigation using SharePoint list
Hi Grace Burns,
In order to get a flyout or to reproduce it, you should do exactly what is mentioned above. I am giving solution if want to get fly out menus vertically. After completing all the steps mentioned above, you should do some modifications in the AspMenu.
After finishing the steps before, your code should look like the following: “<SharePoint:AspMenu ID="TopNavigationMenuV4" runat="server" EnableViewState="false"
DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true" UseSeparateCSS="false" Orientation="Horizontal" StaticDisplayLevels="2"
MaximumDynamicDisplayLevels="4" SkipLinkText="" CssClass="s4-tn"/>”
Now to get vertical menus, just replace the Orientation="Horizontal" with Orientation="Vertical". That should do it. Your code should look like the following now: “<SharePoint:AspMenu ID="TopNavigationMenuV4" runat="server" EnableViewState="false"
DataSourceID="topSiteMap" AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true" UseSeparateCSS="false" Orientation="Vertical" StaticDisplayLevels="2"
MaximumDynamicDisplayLevels="4" SkipLinkText="" CssClass="s4-tn"/>”
