Todd Bleeker's 12 Hive

All MindsharpBlogs

Are you pondering what I'm pondering?

My Links

Post Categories

Archives

Blog Stats

Menu Content Editor Web Parts

Try this script in a Content Editor Web Part (CEWP) for dynamic generation of a mouseover menu with cascading options.

Before Mouseover:


After Mouseover:


<menu id="menu_WPQ_" class="ms-SrvMenuUI"></menu>

<SPAN class="ms-HoverCellInActive"

      style="CURSOR: hand"

      onmouseover="MainMenu(this);"

      onmouseout="this.className='ms-HoverCellInActive'"

      nowrap valign="bottom"

> 

<IMG SRC="/_layouts/images/Menu1.gif" border="0" />

</SPAN>

 

<script type="Text/JavaScript" language="JavaScript">

// Generate dynamic menu example

// todd@mindsharp.com  MindsharpBlogs.com/Todd

// CopyRight © 2006, All Rights Reserved

// Last updated 03/24/2006

// Please don't delete this header

 

var IMG_PATH = "/_layouts/images/";

var SEP = ", ";

 

var menu = document.getElementById("menu_WPQ_");

 

function MainMenu(span)

{

  try

  {

    this.className = "ms-HoverCellActiveDark";

   

    var options = new Array(8);

    options[0] = "http://www.altavista.com, AltaVista";

    options[1] = "http://web.ask.com, Ask";

    options[2] = "http://www.google.com, Google";

    options[3] = "http://www.hotbot.com, HotBot";

    options[4] = "http://search.lycos.com, Lycos";

    options[5] = "http://search.msn.com, MSN";

    options[6] = "http://www.search.com, CNet";

    options[7] = "http://search.yahoo.com, Yahoo!";

 

    //Define a WSS dynamic smart menu

    if(menu)

    {

      //Add an option

      CAMOpt(menu, "option1",

        "document.location.href=\"http://wss1\";",

        IMG_PATH + "aca16.gif", "Menu tooltip is broken");

 

      //Add a Seperator

      CAMSep(menu);

 

      //Add a submenu with two options

      var opts = CASubM(menu, "More Options",

        IMG_PATH + "active.gif", "submenu tooltip also broken");

 

      var opts11 = CASubM(opts, "Option 1.1",

        IMG_PATH + "acl16.gif", "");

      CAMOpt(opts, "Option 1.2",

        "document.location.href=\"http://sps1\";",

        IMG_PATH + "acl16.gif", "");

 

      for(var i=0; i<options.length; i++)

      {

        option = options[i].split(SEP);

        optionUrl = option[0];

        optionName = option[1];

 

        CAMOpt(opts11, optionName,

        "document.location.href=\"" + optionUrl + "\";","", "");

      }

    }

 

    OMenuInt(menu_WPQ_, span, 0, 0, 0);

  }

  catch(e)

  {

    alert(e.Message);

  }

}

</script>

 

 

Here is flatter menu based entirely on CSS (rather than JavaScript) hung on a hyperlink so it must be clicked to see the menu:

 

Before Click:


After Click:


<style>

.ms-SrvMenuUI

{

    display:none;

}

.ms-HoverCellInActive

{

    border: none;

    margin: 1px;

    background-color: transparent;

}

.ms-HoverCellActive

{

    border: #f4c660 1px solid;

    background-color: #e1ecfc;

}

</style>

 

<menu id="myLinks" class="ms-SrvMenuUI">

  <ie:menuitem

   iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/google.gif"

   onMenuClick="window.location.href='http://google.com';"

  >Google</ie:menuitem>

  <ie:menuitem

   iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/msn.gif"

   onMenuClick="window.location.href='http://msn.com';"

  >MSN</ie:menuitem>

  <ie:menuitem

   iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/altavista.gif"

   onMenuClick="window.location.href='http://Altavista.com';"

  >Altavista</ie:menuitem>

  <ie:menuitem

   iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/ask.gif"

   onMenuClick="window.location.href='http://Ask.com';"

  >Ask</ie:menuitem>

  <ie:menuitem

   iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/hotbot.gif"

   onMenuClick="window.location.href='http://HotBot.com';"

  >HotBot</ie:menuitem>

  <ie:menuitem

   iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/lycos.gif"

   onMenuClick="window.location.href='http://Lycos.com';"

  >Lycos</ie:menuitem>

  <ie:menuitem

   iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/search_com.gif"

   onMenuClick="window.location.href='http://Search.com';"

  >Search.com</ie:menuitem>

  <ie:menuitem

   iconSrc="http://www.highdots.com/website-ranking-checker/images/search_engines/yahoo.gif"

   onMenuClick="window.location.href='http://Yahoo.com';"

  >Yahoo!</ie:menuitem>

</menu>

<div class="ms-HoverCellInActive"

  onmouseover="this.className='ms-HoverCellActive'"

  onmouseout="this.className='ms-HoverCellInActive'">

  <a id="menuLink"

    style="CURSOR: hand"

    onclick="JavaScript: if(!myLinks.isOpen())

      myLinks.show(this, true, 0, 0, 0);"

    tabindex="0">

    Search Engines

  </a>

</div>

 

 

I wrote these a long time ago and I didn't vet them for this post but I couldn't see waiting any longer to share them with everyone.

 

<Todd />

posted on Tuesday, August 15, 2006 3:50 PM

Feedback

# Menu Inhaltseditor Webparts 8/16/2006 6:34 AM SharePoint, SharePoint and stuff

Todd Bleeker stellt in seinem Blog zwei Scripte für das Inhaltseditor-Webpart vor, mit dem dynamische...

# re: Menu Content Editor Web Parts 8/28/2006 5:39 AM Ben Weeks

Hi Todd,

Nice bit of code - just wondered for what particular applications you used this?

Regards,

Ben.

# re: Menu Content Editor Web Parts 12/18/2006 5:55 AM Todd Bleeker

Ben,

I've used it for several situations. I really like the fact that I don't have to bring any JavaScript to the table to get menus in WSS. So, this works well if my need is just to supplement an existing DOM element with a menu or to create my own solution that requires a menu.

HTH,

<Todd />

# Dynamic generation of a mouseover menu with cascading options 5/23/2008 6:16 AM SaurabhKV

Menu Content Editor Web Parts SharePoint Menus in C#

# re: Menu Content Editor Web Parts 6/2/2008 5:11 AM Basketbol Oyunları

thnks. I really like the fact that I don't have to bring any JavaScript to the table to get menus in WSS

# re: Menu Content Editor Web Parts 6/2/2008 5:11 AM Klasik Arabalar

hi. So, this works well if my need is just to supplement an existing DOM element with a menu or to create my own solution that requires a menu.

# re: Menu Content Editor Web Parts 7/3/2008 7:23 PM youtube

Great article, thank you.

# re: Menu Content Editor Web Parts 7/15/2008 11:56 PM Oyun

thank you

# re: Chat 7/20/2008 8:09 PM Chat

Thank you my friend..

# re: Forum 7/20/2008 8:11 PM Chat

Thank you, very nice

# re: Menu Content Editor Web Parts 7/22/2008 8:44 AM mircalem

thanks.

# re: Mirc 7/22/2008 8:44 AM mircalem

thanks.

# re: çet cet chat 7/22/2008 8:45 AM çet

thanks.

# re: İzlesene youtube 7/22/2008 8:45 AM youtube

thanks.

# re: Menu Content Editor Web Parts 7/30/2008 8:55 AM hoteles

Thanks

# çizgi film 8/11/2008 6:28 AM Çizgi Film

very good

# film izle 8/11/2008 6:28 AM film izle

very good

# gelinlikler 8/11/2008 6:30 AM Gelinlikler

very good

# masaüstü resimleri 8/11/2008 6:31 AM masaüstü resimleri

very good

# mercedes yedek parçaları 8/11/2008 6:31 AM Mercedes Yedek Parçaları

very good

# autocad kursu 8/11/2008 6:31 AM autocad kursu

very good

# müzik dinle 8/11/2008 6:31 AM müzik dinle

very good

# Bay 8/11/2008 6:32 AM Havuz

very good

# yemek tarifleri 8/11/2008 6:32 AM yemek tarifleri

very good

# Bay 8/11/2008 6:32 AM havuz

very good

# re: Menu Content Editor Web Parts 8/14/2008 10:44 AM gaziosmanpaşa

very good

# klip izle 8/20/2008 4:00 AM klip izle

thanks for links very nice good site

# karadeniz resimleri 9/4/2008 6:50 PM karadeniz

Hi…internet is very good world. Because we are learning the information. And than one day fall down internet, we are tobe orphanhood. Thank you very much…

# karadeniz resimleri 9/6/2008 2:09 PM karadeniz

Hi…internet is very good world. Because we are learning the information. And than one day fall down internet, we are tobe orphanhood. Thank you very much…

# re: Menu Content Editor Web Parts 9/7/2008 8:37 PM Video Converter for Mac

To enjoy your favorite movie, video clips on your Mac OS, you need equiped with powerful video software on Mac, here you can find them.
http://wwww.downloadyoutubeformac.com/
http://wwww.flvconvertermac.com/

# re: Menu Content Editor Web Parts 9/7/2008 8:37 PM Video Converter for Mac

http://wwww.divxtodvdconvertermac.com/
http://wwww.youtubeconvertermac.com/

# re: Menu Content Editor Web Parts 9/11/2008 4:33 AM mırc

thanks.

# chat 9/11/2008 11:20 AM chat

chat, sohbet siteleri

# sohbet siteleri 9/11/2008 11:20 AM sohbet siteleri

chat, sohbet siteleri

# re: Menu Content Editor Web Parts 9/15/2008 2:45 PM Sohbet

thanks

# re: Menu Content Editor Web Parts 9/15/2008 2:47 PM Chat

thanks

# re: Menu Content Editor Web Parts 9/15/2008 2:47 PM Sohbet

thanks

# re: Menu Content Editor Web Parts 9/16/2008 3:24 AM erotik shop

Congrulations for this nice web design..Usefull..

# re: Menu Content Editor Web Parts 9/18/2008 2:04 AM sex shop

Congrulations for this nice web design..Usefull..

# re: Menu Content Editor Web Parts 9/21/2008 4:25 AM araba oyunu


great article… thnx

# re: Menu Content Editor Web Parts 9/21/2008 4:25 AM savaş oyunu


Greetings!!I will bookmark for my son this site

# re: Menu Content Editor Web Parts 9/21/2008 4:26 AM kız oyunları

Congrulations for this nice web design..Usefull..

# re: Menu Content Editor Web Parts 9/21/2008 11:37 AM Chat

thanks

# re: Menu Content Editor Web Parts 9/28/2008 10:01 AM paylaşım

thanks

# re: Menu Content Editor Web Parts 10/10/2008 4:31 AM geciktirici

geciktiricispreyler.com

# re: Menu Content Editor Web Parts 10/10/2008 4:32 AM peruk

laraperuk.com

# re: Menu Content Editor Web Parts 10/11/2008 10:03 AM seks shop

thanks.

# re: Menu Content Editor Web Parts 10/11/2008 10:04 AM sex shop

thanks..

# re: Menu Content Editor Web Parts 10/11/2008 10:04 AM erotik shop

thanks.

# re: Menu Content Editor Web Parts 10/11/2008 10:05 AM sexshop

thanks.

# good 10/15/2008 9:28 AM Spreading

I feel the same.

Title  
Name  
Url
CAPTCHA
Protected by Clearscreen.SharpHIPEnter the code you see:
Comments