1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Quick Navigation Menu

Discussion in 'Custom Service/Development Requests' started by ibaker, Feb 29, 2012.

  1. ibaker

    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.
     

    Attached Files:

  2. Trent Gillespie

    Trent Gillespie Active Member

    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.
     

    Attached Files:

    Shelley likes this.
  3. Russ

    Russ Well-Known Member

    On a side note, very creative !
     
    Dinh Thanh likes this.
  4. ibaker

    ibaker Well-Known Member

    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.
     
  5. Shelley

    Shelley Well-Known Member

    I've managed to shave an extra 5kb off the byte size from trent's post. Fireworks seems to optimize images better than photoshop.
     

    Attached Files:

  6. Shelley

    Shelley Well-Known Member

    8 colours.
     

    Attached Files:

    Veer and Fuhrmann like this.
  7. RobinHood

    RobinHood Well-Known Member

    That's such a cool idea :)
     
  8. ibaker

    ibaker Well-Known Member

    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 :)
     
  9. Mentalist

    Mentalist New Member

    Where do I go to edit the quick navigation menu?
     
  10. DRE

    DRE Well-Known Member

    Can you create a How To Guide on how to do this?
     
    Barbossa likes this.
  11. ibaker

    ibaker Well-Known Member

    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
     
    8thos likes this.
  12. DRE

    DRE Well-Known Member

    Wow and yeah I feel you but its way too much work going back over.
     
    surfsup likes this.
  13. Digital Doctor

    Digital Doctor Well-Known Member

    No one ever uses it on any sites !

    This is being discussed on TAZ [here]

    Very cool tweak @ibaker - people still wont use it.
    But it might get used if it is a dropdown from the [Forums] tab, like https://forums.digitalpoint.com/

    ibaker I see you went back to the traditional forum quicklist thingy.

    upload_2014-12-3_13-19-51.png
     
  14. ibaker

    ibaker Well-Known Member

    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
     
  15. ibaker

    ibaker Well-Known Member

    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.
     

    Attached Files:

Share This Page