How to replicate a sharepoint menu in asp.net

have you tried experimenting with CSS? you should be able to style them as you want.

AspMenu() oMenu = new AspMenu();
oMenu.ID = "ReportMenu";
oMenu.EnableViewState = false;
oMenu.Orientation = Orientation.Horizontal;
oMenu.StaticDisplayLevels = 1;
oMenu.MaximumDynamicDisplayLevels = 5;
oMenu.StaticSubMenuIndent = 0;
oMenu.DynamicHorizontalOffset = 0;
oMenu.StaticPopOutImageUrl = "/_layouts/images/menudark.gif";
oMenu.StaticPopOutImageTextFormatString = "";
oMenu.DynamicHoverStyle.BackColor = Color.FromName("#CBE3F0");
oMenu.SkipLinkText = "";
oMenu.StaticSubMenuIndent = 0;
oMenu.CssClass = "ms-topNavContainer";
oMenu.StaticMenuItemStyle.CssClass = "ms-topnav";
oMenu.StaticMenuItemStyle.ItemSpacing = 0;
oMenu.StaticSelectedStyle.CssClass = "ms-topNavHover";
oMenu.StaticHoverStyle.CssClass = "ms-topNavHover";
oMenu.DynamicMenuStyle.BackColor = Color.FromName("#F2F3F4");
oMenu.DynamicMenuStyle.BorderColor = Color.FromName("#A7B4CE");
oMenu.DynamicMenuStyle.BorderWidth = 1;
oMenu.DynamicHoverStyle.BackColor = Color.FromName("#CBE3F0");
oMenu.DynamicHoverStyle.BorderColor = Color.FromName("#CBE3F0");
oMenu.DynamicMenuItemStyle.CssClass = "ms-topNavFlyOuts";
oMenu.DynamicHoverStyle.CssClass = "ms-topNavFlyOutsHover";
oMenu.DynamicSelectedStyle.CssClass = "ms-topNavFlyOutsHover";

Select allOpen in new window

I have tried CSS and failed dismaly to create anything that looks like a sharepoint menu... <:-)

RayBies - Is this taken from a sharepoint page ?  This doesnt look like something that I can put into a CSS file or webpage. There's loads of MS CSS references.  How can I use this?

Thanks

The above is C#, and on my sites replicate the exact SP Top Navigation menu.
If you just want the css look at the above and get the ***.CssClass ="<theSPCssClass>"

If you want the Asp.Net markup then look below.

Obviously all this depends on your sharepoint theme CSS, which if you haven't got you can google an SP site and rip it.

If this still doesn't resolve your issue, then you need to clear define what your objective is as you have all the elements to allow you to replicate the SP Top Navigation Menu

<SharePoint:AspMenu ID="TopNavigationMenu"
Runat="server"
DataSourceID="topSiteMap"
EnableViewState="false"
AccessKey="m"
Orientation="Horizontal"
StaticDisplayLevels="2"
MaximumDynamicDisplayLevels="1"
DynamicHorizontalOffset="0"
StaticPopoutImageUrl="/_layouts/images/menudark.gif"
StaticPopoutImageTextFormatString=""
DynamicHoverStyle-BackColor="#CBE3F0"
SkipLinkText=""
StaticSubMenuIndent="0" CssClass="ms-topNavContainer">
<StaticMenuStyle/>
<StaticMenuItemStyle CssClass="ms-topnav" ItemSpacing="0px"/>
<StaticSelectedStyle CssClass="ms-topnavselected" />
<StaticHoverStyle CssClass="ms-topNavHover" />
<DynamicMenuStyle  BackColor="#F2F3F4" BorderColor="#A7B4CE" BorderWidth="1px"/>
<DynamicMenuItemStyle CssClass="ms-topNavFlyOuts"/>
<DynamicHoverStyle CssClass="ms-topNavFlyOutsHover"/>
<DynamicSelectedStyle CssClass="ms-topNavFlyOutsSelected"/>
</SharePoint:AspMenu>

Select allOpen in new window

Hi Raybies,

Ok, this looks good.

It's only getting the CSS bits that I'm puzzled with.

 Do you extract the entire MS CSS file, or is it possible to just get the bits that pertain to the code above.  Do you know which file the MS CSS file is?  When I looked there were quite a few of them and they looked inter-dependant.  

( I know theres a lot of themes, i've got access to the SP site, so just need to get to the current one)

Many thanks for your help so far. J

1.- Go to your SP site> right click > Select view source.
2.- Ctrl + F, enter ".css"
3.- You should see something like: <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/core.css?rev=9msmprmeONfN6lJ3wtbAlA%3D%3D"/>
<link rel="stylesheet" type="text/css" id="onetidThemeCSS" href="/acme/_themes/classic/clas1011-65001.css?rev=12%2E0%2E0%2E62ABE"/>


You can:
A.- Just add a reference to this css file in your Asp page by just copying the both lines.

B.- Open the files, and copy the classes you need, ms-topNavContainer, ms-topNav, etc.
eg:

.ms-topnavContainer{
border:none;
border-left:solid 1px #c2dcff;
}
.ms-topnav a{
display:block;
white-space:nowrap;
padding:1px 8px 0px 8px;
height:18px;
}

A.- Should read

Just add a reference to these css files in your Asp page by just copying both lines.

OK thanks Raybies.

I'll give it a go this weekend and report back.

HI Raybies,

I've had a go with your code but it looks like it's the code for the top (horizontal) menu.

I'm looking to replicate the left hand (vertical) menu look and feel.

Got any code for that?

Many thanks!

John

Here's my effort so far and the MS default.

THe code I'm using is

      <div class="Menu">
        <asp:SiteMapDataSource ID="positemap" runat="server" ShowStartingNode="false" />
         <!-- 
        <asp:TreeView SkinID="Arrows" ID="myTreeView" runat="server" DataSourceID="positemap"  />
        -->
        <asp:Menu ID="myMenu" runat="server" DataSourceID="positemap"
        staticdisplaylevels="2" staticsubmenuindent="20"
        EnableViewState="False" Orientation="Vertical" SkipLinkText=""
         MaximumDynamicDisplayLevels="0" Width="100%">
					<LevelMenuItemStyles>
						<asp:MenuItemStyle CssClass="ms-navheader"/>
						<asp:MenuItemStyle CssClass="ms-navitem"/>
					</LevelMenuItemStyles>
					<LevelSubMenuStyles>
						<asp:SubMenuStyle CssClass="ms-navSubMenu1"/>
						<asp:SubMenuStyle CssClass="ms-navSubMenu2"/>
					</LevelSubMenuStyles>
				</asp:Menu>            
      </div>  

Select allOpen in new window

MyEffort.gif
ms.gif

CSS is as below.

I know there's a conflict between some of the css but I cant seem to get any further than this...

.Menu
{
	top: 100px;
	left: 5px;
	width: 160px;
	position: absolute;
	border: #6F9DD9 solid 1px;
	background-color: White;
	font-size: 8pt;
	font-family: tahoma;
	line-height: 10pt;
	background-color: #f7fbff;
}
 
.ms-navheader
{
	padding: 4px 5px 0px 5px;
	height: 23px;
	margin-bottom: 4px;
	color: #003399;
	background-image: url("/images/images/quickLaunchHeader.gif");
	background-position: bottom;
	background-color: #fff;
	border-bottom: solid 1px #a5a5a5;
	font-weight: bold;
}
 
/* Main SP menu styles */
.ms-navitem
{
}
 
.ms-navheader a:hover,.ms-navheader2 a:hover{
color:#000000;
text-decoration:underline;
}
.ms-navItem a{
color:#003399;
text-decoration:none;
}
.ms-navItem a:hover{
color:#000000;
text-decoration:underline;
}
.ms-navsubmenu1{
}
.ms-navsubmenu2{
}
/* Main SP menu styles - end */
 
/*  Main Menu items CSS */
.Menu a:link, a:visited
{
	font-size: 10px;
	width: 100%;
	text-decoration: none;
	color: Blue;
}
.Menu a:hover
{
	font-size: 10px;
	color: black;
	text-decoration: underline;
}
/* end of Menu css statements*/

Select allOpen in new window

It's almost there but

A) the Main headers are incorrect.  If you compare MS and mine, then I'm using the top MS Main heading background for all headings, where the MS version seems to use a different one for the top and the following headers.

Also I just cant seem to get the dots in.  I can get the dots to display but they come up twice for each line...

Apart from that it's great... ;-)

Thanks very much for your help Raybies.