Hi all, here's another of my random problems I can't seem to solve! ...

I am developing a dotnetnuke site using the snapsis navmenu to provide a simple horizontal menu. I would like to use sIFR to replace the font on the menu items. Below is a screenshot of how my menu currently looks: 

 

If I do a straight replace on the links on the menu using sIFR, this is what I get:

 

 

Yikes!!!

I was wondering if anyone has successfully used sIFR with navmenu to replace the font, and if so, how did they do it? Does it require modifying the markup outputted by the NavMenu component (is this even possible?). To be honest, if this is really hard I won't bother, as the menu looks good as it is. It would be nice to be able to do this though

Any help would be greatly appreciated,

Thanks!!

 

For reference, the markup used to embed the snapsis navmenu and the css used to style it are included below:

Snapsis:NavMenu class="adminHostList" ID="AdminHostList" Level="0-1" Type="SelectList"IncludeTabs="Admin,Host" runat="server" />

/* CSS styles for Main menu container */
#snapsis_nav ul
{
    padding:0;
    margin:0;
    list-style:none;
    float:left;   
    background-color:Transparent;
}

/* Main menu items */
#snapsis_nav li
{
  position: relative;
  float:left;
  line-height:39px;
  width:8em;
  list-style: none; 
  font-size:1em;
  border-right:1px solid #444;
}

/* First level links */
#snapsis_nav a
{
font-size:1em;
font-weight:bold;
display:block;
    text-decoration:none;
    text-align:center;     
    width:auto;
    height:39px;
    padding:0;
    color:#DDD;
    background-color:Transparent;
}

/* First level menu links-hover */
#snapsis_nav li a:hover
{
background:transparent url(images/nav_bar_mo.gif) repeat-x;
}

/* Second level menu container */
#snapsis_nav li ul
{
line-height:1.25em;
position: absolute;
left: -999em;
height:auto;
margin:18 0 0 0;
    background:transparent;
border:1px solid #000;
}

/* Second level menu items */
#snapsis_nav li li
{
    margin:0;   
width:13em;
line-height:2.0em;
height:auto;
background:transparent url(images/sub_nav.png) repeat;
}

/* Second level menu links */
#snapsis_nav li li a
{
width:13em;
margin:0;
    padding:2px 0 2px 0;
    height:auto;       
    border-bottom:1px solid #404040;
    border-right:0px;
}

If you haven't done so already, scoot over to snapsis.com and ask for help. John Mitchell is usually quite prompt and very good.

Thanks Joe,

I've posted over at snapsis and so far have been advised to upgrade to sIFR 3. Im giving that a go and will see what happens.

http://www.snapsis.com/Support/tabi...vmenu.aspx

Cheers,

AndyB

Hi Andy,

I noted in the snapsis forum that you discovered rendering time to be slow when you applied the styles to the entire menu. - remember, sIFR is only designed to replace small elements of text within your page, for instance a few header tags. - For lots of text in a menu, you are going to get a performance hit and I would explore other methods ie. just standard text, or, as you mention in your forum post using images , thanks,

Hi Lee,

Yes Im aware that you shouldn't overdo sIFR. Im only really using it for about 5-10 elements per page (mainly headings) and it works ok for me. Im happy to leave the menu as it is with a normal font.

I would if I could add images to the menu, but I don't know how to add images to a snapsis enabled menu. If you could shed any light on this, I'd be very grateful!

Yes just had a look at the site and it looks good!

I've not experimented with images in snapsis yet, a quick question over in their forum will probably give you some tips, but to be honest, I think the menu looks good as it is, and text rather than images will ensure that the page loads as quickly as possible

Thanks,