User-562294917 posted
Yes you're right! But I haven't figured how. I have this, which works ok.
<asp:menu
id="Menu"
runat="server"
datasourceid="SiteMapDataSource"
cssselectorclass="PrettyMenu"
orientation="Horizontal"
/>
<asp:SiteMapDataSource
ID="SiteMapDataSource"
runat="server"
SiteMapProvider="AspNetSqlSiteMapProvider"
/>
The data is fetched through SiteMap provider correctly and I do get a menu, but not styled in any way.
View source on the page and the menu looks like this:
<div class="PrettyMenu" id="ctl00_Menu_Menu">
<div class="AspNet-Menu-Horizontal">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-WithChildren">
<a href="Default.aspx" mce_href="Default.aspx" class="AspNet-Menu-Link">
Home</a>
<ul>
<li class="AspNet-Menu-WithChildren">
<span class="AspNet-Menu-NonLink">
News</span>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="Summary.aspx?CategoryID=0" mce_href="Summary.aspx?CategoryID=0" class="AspNet-Menu-Link" title="News from greater Seattle">
Local</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Summary.aspx?CategoryID=2" mce_href="Summary.aspx?CategoryID=2" class="AspNet-Menu-Link" title="News from around the world">
World</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<span class="AspNet-Menu-NonLink">
Sports</span>
<ul>
<li class="AspNet-Menu-Leaf">
<a href="Summary.aspx?CategoryID=3" mce_href="Summary.aspx?CategoryID=3" class="AspNet-Menu-Link" title="What's happening in baseball">
Baseball</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
I have not linked to any CSS of my own yet, because I can't find any info about doing it, in the Codeplex version, the DLL version. Am I to link my own CSS stylesheet in the top with a new CssSelectorClass, substituting PrettyMenu with, lets say NavBar?
But then how about these lines, which seems to be loaded on the fly into my code:
<script src="/MidtFor/WebResource.axd?d=kgT7KuoLW-pXRxx2l8mcFuarR9PzScsMiFAuBrqHizkLEMDL9xuk_SiGYHjR7GdSFtr1Gm8T8iQnhuen8Q6SbQ2&t=633378210288437500" type="text/javascript"></script>
<script src="/MidtFor/WebResource.axd?d=kgT7KuoLW-pXRxx2l8mcFuarR9PzScsMiFAuBrqHizl0clOAIHxg6_y4MoQeJkW-6zs5jHmY4pCDgFnSO3FcPA2&t=633378210288437500" type="text/javascript"></script><link href="/MidtFor/WebResource.axd?d=kgT7KuoLW-pXRxx2l8mcFhbb06idcRDopGEkRwY-dH9QO5nrHy5DY5ndp3EThPZf0&t=633378210288437500"
type="text/css" rel="stylesheet"></link><link href="/MidtFor/WebResource.axd?d=kgT7KuoLW-pXRxx2l8mcFgGsIHlIO7nZQTSDB1YhjX_1PHAXKusvkis2UOPjd9S67bI_bohRNnO8SxwqIntn5g2&t=633378210288437500" type="text/css" rel="stylesheet"></link>
Before I used the CSSFriendlyAdapter for the Menu, the following CSS style worked with <div> <ul> <li> structure:
.navbar {white-space:nowrap
/*IE hack*/; float:left;
width:958px;
border-left:solid
10px rgb(200,200,200);
border-right:solid
10px rgb(200,200,200);
background-color:rgb(225,225,225);
font-family:"trebuchet ms",arial,sans-serif;
font-size:130%
!important /*Non-IE6*/;
font-size:120%
/*IE6*/;} /*Color navigation bar normal mode*/
/* Main menu */
.navbar
ul {list-style-type:none;}
.navbar
ul
li {float:left;
z-index:auto
!important /*Non-IE6*/;
z-index:1000
/*IE6*/; background-color:rgb(225,225,225);}
.navbar
ul
li a {float:none
!important /*Non-IE6*/;
float:left
/*IE-6*/; display:block;
height:3.1em;
line-height:3.1em;
padding:0
16px 0
16px; text-decoration:none;
font-weight:bold;
color:rgb(100,100,100);
border-right:solid
0px rgb(215,215,215);}
.navbar
ul
li ul {display:none;
border:none;}
/* Submenu (Non-IE6 hovering) */
.navbar
ul
li:hover {position:relative;}
/*Sylvain IE hack*/
.navbar
ul
li:hover a {background-color:rgb(235,235,235);
text-decoration:none;}
/*Color main cells hovering mode*/
.navbar
ul
li:hover ul {display:block;
width:10.0em;
position:absolute;
z-index:1000;
top:3.0em;
margin-top:0.1em;
left:0;
padding:0px
16px 0px
16px; border-top:solid
1px rgb(215,215,215);}
.navbar
ul
li:hover ul
li a {white-space:normal;
display:block;
width:10.0em;
height:auto;
line-height:1.3em;
margin-left:-17px;
padding:4px
16px 4px
16px; border-right:solid
1px rgb(215,215,215);
border-left:solid
1px rgb(215,215,215);
border-bottom:
solid 1px
rgb(215,215,215);
background-color:rgb(235,235,235);
font-weight:normal;
color:rgb(100,100,100);}
/*Color subcells normal mode*/
.navbar ul
li:hover ul
li a:hover {background-color:rgb(225,225,225);
text-decoration:none;}
/*Color subcells hovering mode*/
/* Submenu (IE6 hovering) */
.navbar
table {position:absolute;
z-index:1000;
top:0px;
left:-1px;
border-collapse:collapse;}
.navbar
ul
li a:hover {position:relative
/*Sylvain IE hack*/;
z-index:1000
/*Sylvain IE hack*/;
background-color:rgb(235,235,235);
text-decoration:none;}
/*Color main cells hovering mode*/
.navbar
ul
li a:hover
ul {display:block;
width:10.0em;
position:absolute;
z-index:1000;
top:3.1em;
t\op:3.0em;
left:0px;
marg\in-top:0.1em;
border-top:solid
1px rgb(215,215,215); }
.navbar
ul
li a:hover
ul li
a {white-space:normal;
display:block;
w\idth:10.0em;
height:1px;
line-height:1.3em;
padding:4px
16px 4px
16px; border-right:solid
1px rgb(215,215,215);
border-left:solid
1px rgb(215,215,215);
border-bottom:
solid 1px
rgb(215,215,215);
background-color:rgb(235,235,235);
font-weight:normal;
color:rgb(100,100,100);}
/*Color subcells normal mode*/
.navbar
ul
li a:hover
ul li
a:hover {background-color:rgb(225,225,225);
text-decoration:none;}
/*Color subcells hovering mode*/
I understand if it looks a bit confusing. At this moment, I'm wondering whether I should get rid of the DLL version and copy the code from the menu adapter sample site instead and make the changes in the adapter rendering the code, so that the classes adheres
to my own stylesheet.
