asp repeater with horizontal menu and sub menu

Hi,

I'm so confused. I'm trying to do an horizontal menu and on the top right. Just two buttons will be there.

Then passing other thus A and B to have the submenu in a div below which appear. This div should be a block in my header.

Something which take the whole page on the larger.

 

I m just so confused about it


My sitemap is like that :

 

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" enableLocalization="true">
  <siteMapNode url="~/Default.aspx" title="$resources:Menu, ttHome" description="$resources:Menu, descHome" metaKeywords="$resources:Menu, mKeyHome" metaDesc="$resources:Menu, mDescHome" pageTitle="$resources:Menu, pgttHome">

    <siteMapNode visible="true" url="~/Test/default.aspx" title="$resources:Menu, ttPhy" description="$resources:Menu, descPhy" metaKeywords="$resources:Menu, mKeyPhy" metaDesc="$resources:Menu, mDescPhy" pageTitle="$resources:Menu, pgttPhy" width="$resources:Menu, widtPhy" pageHeader="$resources:Menu, pgHdPhy">
      <siteMapNode visible="true" url="~/Test/Definition.aspx" title="$resources:Menu, ttDefinition" description="$resources:Menu, descDefinition" metaKeywords="$resources:Menu, mKeyDefinition" metaDesc="$resources:Menu, mDescDefinition" pageTitle="$resources:Menu, pgttDefinition" width="$resources:Menu, widtDefinition" pageHeader="$resources:Menu, pgHdDefinition"/>
      <siteMapNode visible="true" url="~/Test/Objectives.aspx" title="$resources:Menu, ttObjectives" description="$resources:Menu, descObjectives" metaKeywords="$resources:Menu, mKeyObjectives" metaDesc="$resources:Menu, mDescObjectives" pageTitle="$resources:Menu, pgttObjectives" width="$resources:Menu, widtObjectives" pageHeader="$resources:Menu, pgHdObjectives"/>
      <siteMapNode visible="true" url="~/Test/DataCollection.aspx" title="$resources:Menu, ttDataColl" description="$resources:Menu, descDataColl" metaKeywords="$resources:Menu, mKeyDataColl" metaDesc="$resources:Menu, mDescDataColl" pageTitle="$resources:Menu, pgttDataColl" width="$resources:Menu, widtDataColl" pageHeader="$resources:Menu, pgHdDataColl"/>
      <siteMapNode visible="true" url="~/Test/Participation.aspx" title="$resources:Menu, ttParticipation" description="$resources:Menu, descParticipation" metaKeywords="$resources:Menu, mKeyParticipation" metaDesc="$resources:Menu, mDescParticipation" pageTitle="$resources:Menu, pgttParticipation" width="$resources:Menu, widtParticipation" pageHeader="$resources:Menu, pgHdParticipation"/>
      <siteMapNode visible="true" url="~/Test/Contributing.aspx" title="$resources:Menu, ttContributing" description="$resources:Menu, descContributing" metaKeywords="$resources:Menu, mKeyContributing" metaDesc="$resources:Menu, mDescContributing" pageTitle="$resources:Menu, pgttContributing" width="$resources:Menu, widtContributing" pageHeader="$resources:Menu, pgHdContributing"/>
      <siteMapNode visible="true" url="~/Test/Enrollment.aspx" title="$resources:Menu, ttEnrollment" description="$resources:Menu, descEnrollment" metaKeywords="$resources:Menu, mKeyEnrollment" metaDesc="$resources:Menu, mDescEnrollment" pageTitle="$resources:Menu, pgttEnrollment" width="$resources:Menu, widtEnrollment" pageHeader="$resources:Menu, pgHdEnrollment"/>
      <siteMapNode visible="true" url="~/Test/Form.aspx" title="$resources:Menu, ttForm" description="$resources:Menu, descForm" metaKeywords="$resources:Menu, mKeyForm" metaDesc="$resources:Menu, mDescForm" pageTitle="$resources:Menu, pgttForm" width="$resources:Menu, widtForm" pageHeader="$resources:Menu, pgHdForm"/>
    </siteMapNode>

    <siteMapNode visible="true" url="~/Try/default.aspx" title="$resources:Menu, ttPat" description="$resources:Menu, descPat" metaKeywords="$resources:Menu, mKeyPat" metaDesc="$resources:Menu, mDescPat" pageTitle="$resources:Menu, pgttPat" width="$resources:Menu, widtPat" pageHeader="$resources:Menu, pgHdPat">
      <siteMapNode visible="true" url="~/Try/Definition.aspx" title="$resources:Menu, ttDefinitionPat" description="$resources:Menu, descDefinitionPat" metaKeywords="$resources:Menu, mKeyDefinitionPat" metaDesc="$resources:Menu, mDescDefinitionPat" pageTitle="$resources:Menu, pgttDefinitionPat" width="$resources:Menu, widtDefinitionPat" pageHeader="$resources:Menu, pgHdDefinitionPat"/>
      <siteMapNode visible="true" url="~/Try/Participation.aspx" title="$resources:Menu, ttParticipationPat" description="$resources:Menu, descParticipationPat" metaKeywords="$resources:Menu, mKeyParticipationPat" metaDesc="$resources:Menu, mDescParticipationPat" pageTitle="$resources:Menu, pgttParticipationPat" width="$resources:Menu, widtParticipationPat" pageHeader="$resources:Menu, pgHdParticipationPat"/>
    </siteMapNode>

    
    <!--<siteMapNode visible="$resources:Menu, visiSiteMp" url="/Utility/sitemap.aspx" title="$resources:Menu, ttSiteMp" description="$resources:Menu, descSiteMp" metaKeywords="$resources:Menu, mKeySiteMp" metaDesc="$resources:Menu, mDescSiteMp" pageTitle="$resources:Menu, pgttSiteMp" pageHeader="$resources:Menu, pgHdSiteMp" />-->

  </siteMapNode>
</siteMap>

 

 

My Css is like that :



/* a hack so that IE5.5 faulty box model is corrected */
/* * html #wrapNavTop a, * html #wrapNavTop a:visited { width: 139px; w\idth: 139px;} */


#wrapNavTop li {
  float: left;/* width: 139px; */
  position: relative;
  text-align: center;
  width: auto;
}
/* style the links for the top level */
#wrapNavTop table {
  border-collapse: collapse;
  left: 0;
  position: absolute;
  top: 0;
}
/* style the second level links */


/* hack to correct IE5.5 faulty box model */
/* * html #wrapNavTop { width: 980px; w\idth: 980px; } */
/* remove all the bullets, borders and padding from the default list styling */
#wrapNavTop ul li ul li.hasLevel3 a:active, #wrapNavTop ul li ul li.hasLevel3 a:hover {
  background: #fff url(     '/styles/images/nav/nav.pixmap.gif' ) no-repeat 50% -105px;
  color: #000;
  font-weight: normal;
  text-decoration: none;
}
/* style the top level hover */
#wrapNavTop ul li ul li.hasLevel3 a:link, #wrapNavTop ul li ul li.hasLevel3 a:visited {
  background: #fff url(     '/styles/images/nav/nav.pixmap.gif' ) no-repeat 50% -70px;
  color: #535353;
  font-weight: normal;
}
/* style the second level hover if third level exists */
#wrapNavTop ul li ul li.hasLevel3 li a:link, #wrapNavTop ul li ul li.hasLevel3 li a:visited {
  background: #fff none;
  color: #535353;
  font-weight: normal;
}
/* style the second level hover if third level exists */
#wrapNavTop ul li ul li.hasLevel3 ul li.seperator a {
  background: transparent;
  color: #d8d8d8;
  font-size: 1px;
  height: 1px;
  line-height: 1px;
  margin: 0 auto;
  padding: 0;
  width: 139px;
}
/*------------------------------------------*/
#wrapNavTop ul li ul li.hasLevel3 ul li.seperator, #wrapNavTop ul li.selected ul li.hasLevel3 ul li.seperator {
  background: transparent;
  color: #fff;
  font-size: 1px;
  height: 1px;
  line-height: 1px;
}
#wrapNavTop ul li ul li.seperator a, #wrapNavTop ul li.selected ul li.seperator a {
  background: #d4d4d4;
  color: #d8d8d8;
  font-size: 1px;
  height: 1px;
  line-height: 1px;
  margin: 0 auto;
  padding: 0;
  width: 139px;
}
#wrapNavTop ul li ul li.seperator, #wrapNavTop ul li.selected ul li.seperator {
  background: transparent url(     '/styles/images/nav/nav.pixmap.gif' ) no-repeat 50% -35px;
  color: #fff;
  font-size: 1px;
  height: 1px;
  line-height: 1px;
}
#wrapNavTop ul li.last ul ul {
  left: -153px;
}
/* style the table so that it takes no part in the layout - required for IE to work */
#wrapNavTop ul li.selected a, #wrapNavTop ul li.selected a:link, #wrapNavTop ul li.selected a:visited
{
	background-position: #cc0000 none;
	background-color: #CACACA;
	color: #FFFFFF;
	font-weight: normal;
}
#wrapNavTop ul li.selected a:active, #wrapNavTop ul li.selected a:hover
{
	background-position: #CCCCCC;
	background-color: #cc0000;
	color: #FFFFFF;
	font-weight: normal;
}
/* style the second level hover if third level exists */
#wrapNavTop ul li.selected a:hover ul, #wrapNavTop ul li:hover ul, #wrapNavTop ul a:hover ul, #wrapNavTop ul:hover ul:hover ul {
  display: block;
  visibility: visible;
}
/* keep the third level hidden when you hover on first level list OR link */
#wrapNavTop ul li.selected ul li a, #wrapNavTop ul li.selected ul li a:link, #wrapNavTop ul li.selected ul li a:visited {
  background: #fff;
  color: #535353;
  font-weight: normal;
}

#wrapNavTop ul li.seperator {
  background: #BE4249;
  font-size: 1px;
  height: 30px;
  line-height: 1px;
}
#wrapNavTop ul ul
{
	/*visibility: hidden;*/
	background: #fff;
	border: 1px solid #d6d6d6;
	border-top: 0 none;
	display: none;
	height: auto;
	left: 40;
	position: absolute;
	top: 80px; /* distance sub menu */
	width: 153px;
}
/* another hack for IE5.5 */
/* * html #wrapNavTop ul ul {top:40px; top:40px;} */
/* position the third level flyout menu */
#wrapNavTop ul ul {
/* width: 139px; */
  z-index: 1000;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#wrapNavTop ul ul a, #wrapNavTop ul ul a:visited {
  background: transparent;
  color: #000;
  height: auto;
  line-height: 16px;
  width: 139px;
}
#wrapNavTop ul ul a.drop, #wrapNavTop ul ul a.drop:visited {
  background: #a71930;
  color: #fff;
  font-weight: normal;
}
/* style the second level hover */
#wrapNavTop ul ul a.drop:hover {
  background: #f4f4f4;
  color: #5d5d5d;
}
#wrapNavTop ul ul li {
  background: #fff;
  color: #5d5d5d;
  text-align: left;
  width: 153px;
}
/* style the second level background */
#wrapNavTop ul ul li a, #wrapNavTop ul ul li a:link, #wrapNavTop ul ul li a:visited {
  background: transparent;
  color: #535353;
  font-weight: normal;
  height: auto;
  margin: 0 auto;
  min-height: 23px;
  padding: 8px 6px 4px 6px;
  width: 139px;
  width: 127px;
}

/* style the second level hover if third level exists */
#wrapNavTop ul ul ul {
  border: 1px solid #d6d6d6;
  left: 153px;
  top: 0;
  width: 153px;
}
/* position the third level flyout menu for a left flyout */
#wrapNavTop ul ul ul {
  left: 153px;
  top: -1px;
  width: 153px;
}
/* position the third level flyout menu to the right */
#wrapNavTop ul ul ul a, #wrapNavTop ul ul ul a:visited {
  background: #fff;
}
/* style the third level hover */
#wrapNavTop ul ul ul a:hover {
  background: #E8E8E8;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
#wrapNavTop ul ul:hover > a.drop {
  background: #E8E8E9;
  color: #535353;
}
#wrapNavTop UL
{
	list-style-type: none;
	list-style-image: none;
	height: 15px;
}
#wrapNavTop UL LI {
	 FLOAT: right; PADDING-TOP: 0px
}

#wrapNavTop UL LI A {
	PADDING-BOTTOM: 12px; LINE-HEIGHT: 1.2em; MARGIN: 0px; PADDING-LEFT: 16px; PADDING-RIGHT: 16px; DISPLAY: block; COLOR: #959595; FONT-SIZE: 14px; TEXT-DECORATION: none; 
	PADDING-TOP: 40px
}
#wrapNavTop UL LI.active A {
	BACKGROUND-COLOR: #cc0000; COLOR: #fff
}
	

#wrapNavTop UL LI A:hover
{
	background-color: #cc0000;
	color: #FFFFFF; /*padding-bottom: 0px;
	margin: 0px;
	padding-left: 0px;
	padding-right: 8px;
	float: right;
	padding-top: 0px;*/
}

#wrapNavTop ul {
  float: right;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: auto;
  z-index: 1000;
}
#wrapNavTop ul li a {
  height: 30px;
  text-decoration: none;
}
#wrapNavTop ul li ul li a {
  height: auto;
  text-decoration: none;
}

#wrapNavTop ul ul li a:active, #wrapNavTop ul ul li a:hover, #wrapNavTop ul li.selected ul li a:active, #wrapNavTop ul li.selected ul li a:hover, #wrapNavTop ul li ul li.hasLevel3 li a:active, #wrapNavTop ul li ul li.hasLevel3 li a:hover
{
	background-position: 50% -35px;
	background: #C0C0C0 url(../styles/images/nav/nav.pixmap.gif) no-repeat 50% -35px;
	color: #FFFFFF;
	font-weight: normal;
	text-decoration: none;
}

#topPan ul.dropdown{list-style-type: none; width:580px; height:22px; position:absolute; top:59px; right:60px; display:block;}
#topPan ul.dropdown li{float:left; width:79px; height:22px; }
#topPan ul.dropdown li a{display:block; width:79px;background:url(images/vertical-dot.gif) 100% 0 no-repeat #fff; color:#3E3E3E; font-size:11px; text-decoration:none; text-align:center; line-height:22px;} 
#topPan ul.dropdown li a:hover{text-decoration:none; background:url(images/vertical-dot.gif) 100% 0 no-repeat #fff; color:#7C7900;}

 

 

 

And my code in my master page is like :

      <div id="wrapNavTop">
                    <asp:SiteMapDataSource ID="smdsNavTop" runat="server" StartingNodeUrl="Default.aspx"
                        ShowStartingNode="False" SiteMapProvider="sitemapNavTop" />
                <asp:Repeater runat="server" ID="repNavTop" DataSourceID="smdsNavTop">
                    <HeaderTemplate>
                        <ul id="navTop">
                            <%-- <li class="flg"></li>  --%>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <%# (isVisible((SiteMapNode)Container.DataItem) ? "<li class=\"seperator\">&nbsp;</li>" : "")%>
                        <%# UtlFuncs.isActiveNode((SiteMapNode)Container.DataItem) && (isVisible((SiteMapNode)Container.DataItem)) ? "<li class='selected'>" : (isVisible((SiteMapNode)Container.DataItem) ? "<li>" : "")%>
                        <asp:HyperLink ID="navTop" runat='server' NavigateUrl='<%# Server.UrlPathEncode(Eval("Url", "{0}")) %>'
                            ToolTip='<%# Server.HtmlDecode(Eval("Title", "{0}")) %>' Visible='<%# (isVisible((SiteMapNode)Container.DataItem)) %>'
                            Width='<%# Convert.ToInt32(Eval("[width]")) %>'>
                            <%# Server.HtmlEncode(Eval("Description", "{0}"))%>
                        </asp:HyperLink>
                        <asp:Repeater runat="server" ID="repNavTopL2" DataSource="<%# ((SiteMapNode) Container.DataItem).ChildNodes %>"
                            Visible="<%# ((SiteMapNode) Container.DataItem).ChildNodes.Count == 0 ? false : true %>">
                            <HeaderTemplate>
                                <ul>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <%# (isVisible((SiteMapNode)Container.DataItem) && (Container.ItemIndex > 0) ? "<li class=\"seperator\">&nbsp;</li>" : "")%>
                                <li id="Li1" runat="server" visible='<%# (isVisible((SiteMapNode)Container.DataItem)) %>'>
                                    <asp:HyperLink ID="navTopL2" runat='server' NavigateUrl='<%# Server.UrlPathEncode(Eval("Url", "{0}")) %>'
                                        ToolTip='<%# Server.HtmlDecode(Eval("Title", "{0}")) %>' Visible='<%# (isVisible((SiteMapNode)Container.DataItem)) %>'>
                                        <%# Server.HtmlEncode(Eval("Description", "{0}"))%>
                                    </asp:HyperLink>
                                </li>
                            </ItemTemplate>
                            <FooterTemplate></ul> </FooterTemplate>
                        </asp:Repeater>
                        <%# (isVisible((SiteMapNode)Container.DataItem) ? "</li>" : "")%>
                    </ItemTemplate>
                    <FooterTemplate></ul> </FooterTemplate>
                </asp:Repeater>
            </div>

 

Thanks a lot for your help,

I don't know who can help me on this .... or know where can i find an exemple on that ... but ive no idea.

 

 

 

 

 

 

 

 

 

thoughts on "asp repeater with horizontal menu and sub menu"

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>