Quick Navigation Menu

ibaker

Well-known member
I have found that no one uses the Quick Navigation Menu on my site so I thought I would dress it up. As my site contains addons and is not just a forum site, I replaced the Quick Navigation Menu with a "Hot Spot" image that covers the entire site. As my site is about Aviation I made the image like a Site Map for an Air Show as a novelty.

I have tried all I can to make the image as small as possible however it is still 79kb, can anyone advise of the best way to make my image, which I have attached, any smaller...I use paint.net as that is all I have...thanks for any help.
 

Attachments

  • site_map.gif
    site_map.gif
    78.7 KB · Views: 223
I don't quite know why you want it smaller, but I've saved it in Photoshop using a color pallet of 16. It reduced the size to 45kb.
 

Attachments

  • site_map.gif
    site_map.gif
    45.8 KB · Views: 113
Thanks Trent, the smaller file size the better as many of my users are in the country using slow connections and something like this which is meant to be "Quick" the faster it is displayed the better...thanks again.
 
I've managed to shave an extra 5kb off the byte size from trent's post. Fireworks seems to optimize images better than photoshop.
 

Attachments

  • site_map.gif
    site_map.gif
    40.5 KB · Views: 105
Thanks everyone...Shelley, you are a legend and I am sure everyone here at XF knows that...the 28k one I think has a little too much degradation but your 40k one is great.

Robinhood, the thought actually came from mobile phones...I had an idea of the site menu system when viewed on a mobile phone could be a hotspot image menu system...easy to call up, easy to select an option, would view nicely on a mobile phone screen and maybe helping the site to be somewhat more interactive with the user. The concept could even be extended to replace the entire menu system. You could just have a small image that says "Menu" and when a user hovers on it, it zooms out into a hotspot image menu system, move mouse off image and it zooms back down again.

I really should look for better things to do with my time :)
 
I have found that no one uses the Quick Navigation Menu on my site so I thought I would dress it up. As my site contains addons and is not just a forum site, I replaced the Quick Navigation Menu with a "Hot Spot" image that covers the entire site. As my site is about Aviation I made the image like a Site Map for an Air Show as a novelty.

I have tried all I can to make the image as small as possible however it is still 79kb, can anyone advise of the best way to make my image, which I have attached, any smaller...I use paint.net as that is all I have...thanks for any help.

Where do I go to edit the quick navigation menu?
 
Thanks everyone...Shelley, you are a legend and I am sure everyone here at XF knows that...the 28k one I think has a little too much degradation but your 40k one is great.

Robinhood, the thought actually came from mobile phones...I had an idea of the site menu system when viewed on a mobile phone could be a hotspot image menu system...easy to call up, easy to select an option, would view nicely on a mobile phone screen and maybe helping the site to be somewhat more interactive with the user. The concept could even be extended to replace the entire menu system. You could just have a small image that says "Menu" and when a user hovers on it, it zooms out into a hotspot image menu system, move mouse off image and it zooms back down again.

I really should look for better things to do with my time :)
Can you create a How To Guide on how to do this?
 
Can you create a How To Guide on how to do this?
What I did was:
1. First create the image that you want to have in the Quick Navigation popup
2. Create the hotspots with links to the relevant areas of your site on the image
3. Edit the quick_navigation_menu template with your image...mine as seen on http://www.aircraftpilots.com is:
Code:
<xen:title>{xen:phrase quick_navigation_menu}</xen:title>
 
<xen:comment> IB changed complete template </xen:comment>
<div class="section" style="width:620px;">
    <map id="Sitemap" name="Sitemap">
        <area alt="" coords="128, 113, 214, 164" href="{xen:link media}" shape="rect" />
        <area alt="" coords="134, 241, 222, 295" href="{xen:link useralbums}" shape="rect" />
        <area alt="" coords="272, 393, 333, 441" href="{xen:link members}" shape="rect" />
        <area alt="" coords="136, 504, 188, 554" href="{xen:link categories/news.4}" shape="rect" />
        <area alt="" coords="264, 507, 347, 539" href="{$homeLink}" shape="rect" />
        <area alt="" coords="417, 505, 566, 555" href="{xen:link cz-groups}" shape="rect" />
        <area alt="" coords="470, 578, 613, 616" href="http://www.aviationenthusiasts.net" shape="rect" />
        <area alt="" coords="98, 346, 216, 482" href="{xen:link directory}" shape="rect" />
        <area alt="" coords="313, 103, 395, 147" href="{xen:link pages/resources}" shape="rect" />
        <area alt="" coords="315, 36, 386, 99" href="{xen:link tutorials}" shape="rect" />
        <area alt="" coords="305, 215, 398, 289" href="{xen:link forum}" shape="rect" />
        <area alt="" coords="544, 39, 598, 113" href="{xen:link misc/contact}" shape="rect" />
        <area alt="" coords="546, 117, 598, 159" href="{xen:link help}" shape="rect" />
        <area alt="" coords="432, 392, 490, 447" href="../123flashchat.php" target="_blank" shape="rect" />
        <area alt="" coords="19, 270, 76, 344" href="{xen:link events}" shape="rect" />
        <area alt="" coords="332, 297, 376, 337" href="{xen:link account}" shape="rect" />
        <area alt="" coords="484, 250, 556, 310" href="http://www.clearprop.com.au/" shape="rect" />
    </map>
    <img alt="Site Map" height="620" longdesc="Aircraft Pilots Site Map" src="../images/site_map.gif" usemap="#Sitemap" width="620" />
 
    <div class="sectionFooter overlayOnly"><a class="button primary OverlayCloser">{xen:phrase close}</a></div>
</div>

Hope this helps and sorry for taking so long in getting back to this thread as I have been debating the return to vb or stay with XF question for a while now
 
Yes I did and as you say, no one uses it anyway. I am finding that 95% of users just use the forums and in fact any new users that find the site through Google don't even go to the home page and if they bookmark it is just the new posts link
 
I decided to have a look at resurrecting this as I think it is a cool novelty idea especially for mobile devices however, the issue is the resizing of the map and keeping the hotspots in place with responsive design. I have been able to do it in a standalone html file and it works great however it doesn't work when transferring the code into the quick_navigation_menu template (plus the js files etc).

I have attached the standalone files to see if anyone can get it working as a quick navigation menu, it would be great if you could and I would very much appreciate it.
 

Attachments

Top Bottom