NAV image menu
Last Post 12/09/2009 10:55 AM by Lee Sykes. 5 Replies.
Author Messages
jm
Nuke Newbie
Nuke Newbie
Posts:2


--
12/07/2009 7:30 PM  
Hi... I am at a loss and hope someone may have some useful advice concerning the NAV menu.

I need to change an image-based css menu into a DNN NAV menu.  I have been given a single sprite .gif image containing the images for the page links along with the images corresponding to their :hover states.  I've more or less given up on this, as it does not seem possible, but I have to imagine that there must be some alternative.

I could cut the .gif sprite image up and assign them as I create the pages, but even if I did there seems to be no way to (1) not have the link text appear next to the link image or (2) assign a :hover state to change the image on hover. 

I realize that I could change the background image using CSSNodeSelectRoot and CSSNodeHoverRoot, but a generic class for all menu items will not do the trick.  For instance, I need the link for the "About" page to have a background image of "about.gif" with the CSSNodeSelectRoot being "about_selected.gif".  Whereas the link for the "Stuff" page would have to be the "stuff.gif" image with its CSSNodeSelectedRoot being "stuff_selected.gif".

Any advise would be greatly appreciated.
Joseph Craig
DNN MVP
Posts:11667


--
12/07/2009 10:40 PM  
I'd like to see someone describe all of this.

I do know that you can style every node in the NAV menu, so your CSS can specify each sprite. There is a thread in the InstallIt forum at DotNetNuke (NAV Menu is in the thread title) and there are some discussions about styling the menu.

Practically, though, carving up the sprite file might be a LOT quicker ...

Joe Craig, Patapsco Research Group
Complete DNN Support
Lee Sykes
DNN Creative Staff
Nuke Master VI
Nuke Master VI
Posts:4945


--
12/09/2009 2:33 AM  
This is possible with the DNN 5 Nav Menu not the DNN4.x Nav Menu where you can specify exactly what happens with each menu item using CSS.

I think I need to create a tutorial on delving deeper into the new CSS features of the Nav Menu, I tell you what, send me the files and I will have a look at building a menu for you - as long as I can use them as a basis for a tutorial.

Thanks,
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/DNNCreative

Lee Sykes's Facebook Profile
Joseph Craig
DNN MVP
Posts:11667


--
12/09/2009 8:10 AM  
That will be another winner!

Joe Craig, Patapsco Research Group
Complete DNN Support
jm
Nuke Newbie
Nuke Newbie
Posts:2


--
12/09/2009 10:25 AM  
Thanks Lee, that would be a great help for future projects.  I'll send you the files as soon as I get a chance.

I finally decided to just scrap my attempts at building an image only Nav menu based on the sprite and just hard code the image menu that my client wanted.  I then added the DNN Nav menu down below to hold the DNN host and admin links and also any subsequent links resulting from subsequent pages the client may need to add.  Not an ideal solution by far, but it was acceptable this time.
Lee Sykes
DNN Creative Staff
Nuke Master VI
Nuke Master VI
Posts:4945


--
12/09/2009 10:55 AM  
I'm going to put some time to one side tomorrow to experiment with this, so if you can get me the files today that would be great, thanks,
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/DNNCreative

Lee Sykes's Facebook Profile


---