Welcome to TalkGraphics.com
Results 1 to 10 of 10
  1. #1
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,315

    Default Quiet aound here lately. Perhaps we could discuss alternative navbars?

    I've never been a great lover of Xara's navbars. Firstly they create two images for each button that rendered as bitmaps and are blurry. So a smallish menu can create quite a few image files that the server has to request slowing down the page load.

    I prefer to create my own navbars especially as the latest Xara apps can create svg versions thus by-passing the need to download fuzzy bitmaps and speed up the sites rendering.

    In a recent thread SueB asked about
    "I never did get how to make the hamburger navigation properly"...

    I created an alternative using only Xara which I liked a lot as it gave me design control. There was two ways to implement this navbar:

    1: Repeat the navbar layers on every page. Could become tiresome, repeat on every page etc.
    2: Load the navbar menu within each page via an iframe call to load 'menu.htm'.

    I prefer the ifame route.

    However I'm finding that the menu.htm page is causing problems. I can Ctrl+F5 which refreshes the page containing the menu.htm iframe but does not refresh the actual menu.htm within the page.

    How can I ensure the menu.htm file is updated each time it's called? It's a very tiny page.



    LINK to my site with a iframe menu.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  2. #2
    Join Date
    Oct 2019
    Location
    USA
    Posts
    189

    Default Re: Quiet aound here lately. Perhaps we could discuss alternative navbars?

    I hit your 'burger'
    which opened the iframe
    then rt mouse click and reload was option

    ref iFrame:
    I used for years and ALWAYS was told that there were BAD to use
    (even though always worked great for me)
    anyway = you are all here much better at this than me
    but why use an iframe? as opposed to lining to a page in your domain somewhere/?

  3. #3
    Join Date
    Dec 2006
    Location
    Melfort, Saskatchewan Canada
    Posts
    700

    Default Re: Quiet aound here lately. Perhaps we could discuss alternative navbars?

    Thanks @egg. Yes a little quiet but it’s summer.
    Thanks for the iframe example.
    I prefer to use a pop up layer. I can control the fade in and fade down and perhaps you can do that with I frames as well.
    I’d love Xara to update some ready made nav bars in the catalogue. Especially a drop down Hamburger. It would be so handy.
    I think I’ll head over to the suggestion box!
    Bill Wood
    Expresiv Designs.
    Charity Web Design
    XARA Pro+. WD17, Designer 17. Premium packages.

  4. #4
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,503

    Lightbulb Re: Quiet aound here lately. Perhaps we could discuss alternative navbars?

    Egg, I covered this once before but I cannot nail it down. Found it - https://www.talkgraphics.com/showthr...196#post647196.

    Basically, there is a JS trick along the lines of:
    Code:
    <iframe id="iframeMenu" src="https://parkeston.com/tg/iframe-menu/menu.htm" width="100%" height="100%" scrolling="no" frameborder="0" marginheight="0" marginwidth="0"></iframe>
    <script>
      var iframe = document.getElementById('iframeMenu');
      iframe.src = iframe.src;
    </script>
    Here is my take on the concept of (mostly Xara functional) NavBars: CSS&JS - Modern Menu.xar

    • At the simplest level a set of "buttons" using just Website link colours
    • Adding some small CSS, adds a button effect
    • Adding in JavaScript Links to open and close sub-menus - a bit like Xara's undocumented popup mechanism for Layers
    • A little more CSS to offer transition effects
    • Robust in Variants
    • Easy to just use !Menu layer for all the Navbar furniture - I kept separate for instructional purposes here
    • Each page can have Menu-item specific objects, making presentation extremely flexible.


    Acorn
    Last edited by Acorn; 30 June 2022 at 05:25 PM.
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  5. #5
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,315

    Default Re: Quiet aound here lately. Perhaps we could discuss alternative navbars?

    Sorry for the late reply, been away for the week-end.

    @ 3D
    but why use an iframe? as opposed to lining to a page in your domain somewhere/?
    I take it you mean linking. I opened the thread just to try to start a discussion re navbars and I could either handle tis in two ways:
    Having a seperate page within the xar file containing the menu. Then invoke it either of two ways:

    1: Have the hamburger menu open a menu.htm page via a link Same Frame (_self)
    2: Have the hamburger menu open a pop-up layer containing an iframe Same Window(_top)

    I found on the second choice Ctrl+F5 refreshed the main window but not the menu iframe.

    I can confirm that Acorns excellent JS trick worked perfectly in overcoming this issue.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  6. #6
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,315

    Default Re: Quiet aound here lately. Perhaps we could discuss alternative navbars?

    @ Bill
    Id love Xara to update some ready made nav bars in the catalogue. Especially a drop down Hamburger. It would be so handy.
    I couldn't agree more. Xara is now capable of exporting buttons (or other shapes) as svg's so why are we stuck with inferior mushy bitmap images that increase the page download speed.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  7. #7
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    856

    Default Re: Quiet aound here lately. Perhaps we could discuss alternative navbars?

    @Egg & Acorn,

    Played around with Acorn's jQuery ideas and created a mobile variant driven from the standard hamburger, it provides for standard links where a submenu is not required and uses jQuery for the submenus:

    e.g. https://initiostar.co.uk/demo/jq-menu/index.htm

    Mostly, I use the mobile menu popup layer convention with either additional submenu popups as required, or on-page submenus e.g. https://theparsonage.co.uk/index.htm (mobile variant).

    Acorn's jQuery model offers a lot of flexibility. My efforts here: JQuery_NavBar.xar - my limited knowledge works, but I expect there could be an improvement.
    Gary
    www.initiostar.co.uk


    Xara Pro X 19.0.0.64291 May 3 2022

  8. #8
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,315

    Default Re: Quiet aound here lately. Perhaps we could discuss alternative navbars?

    @ Acorn.

    Thanks for the JS trick code that fixes the problem.

    I like your Modern Menu solution. I'll need to look at it a bit more to follow you
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  9. #9
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    21,315

    Default Re: Quiet aound here lately. Perhaps we could discuss alternative navbars?

    That looks like a sweet menu Gary. I'll look further tomorrow.
    Egg

    Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor
    + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  10. #10
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,503

    Default Re: Quiet aound here lately. Perhaps we could discuss alternative navbars?

    Quote Originally Posted by Initiostar View Post
    @Egg & Acorn,
    Played around with Acorn's jQuery ideas and created a mobile variant driven from the standard hamburger, it provides for standard links where a submenu is not required and uses jQuery for the submenus:
    e.g. https://initiostar.co.uk/demo/jq-menu/index.htm
    Mostly, I use the mobile menu popup layer convention with either additional submenu popups as required, or on-page submenus e.g. https://theparsonage.co.uk/index.htm (mobile variant).
    Acorn's jQuery model offers a lot of flexibility. My efforts here: JQuery_NavBar.xar - my limited knowledge works, but I expect there could be an improvement.
    Gary, thank you for a nice disign.
    I would also try using slideToggle() over slideDown().
    Once you are engaged, using animate() is very powerful and similar to what I was doing with anime.js.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •