Creating Flyout Menu Navigation using SharePoint list

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.

• Status: Open
• Question Views: 2856
• Answer Count: 3
• Vote Up 0 Vote Down

• Answer Accepted: Yes
• Question Category: MS SharePoint

Best Answer by Eville bandler

Go To Solution

Answered By Iamexpert 0 points N/A #108071

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>

 

About Iamexpert

Questions
0

Answers
195

Best Answers
34

• Vote Up 0 Vote Down

• Posted on - 01/25/2012
• Question Category: MS SharePoint

Answered By Farrer Alan 0 points N/A #108072

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>

 

About Farrer Alan

Questions
1

Answers
25

Best Answers
15

• Vote Up 0 Vote Down

• Posted on - 12/08/2012
• Question Category: MS SharePoint

Best Answer

Best Answer

Answered By Eville bandler 5 points N/A #108073

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"/>”

About Eville bandler

Questions
1

Answers
52

Best Answers
29

• Vote Up 0 Vote Down

• Posted on - 12/11/2012
• Question Category: MS SharePoint