Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Need help with a non-functional mobile only nav menu

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #193914
    santafe
    Participant

    Hello,
    I am working on a making my website responsive, but have run into an issue with the nav menu.
    If you view the following page:
    http://www.pabriles.com/chisels.html
    on something other than an iPhone (or a browser-width >480px), you should find that the menu works correctly. However, if you view the same page on an iPhone you will see that the nav menu does not work correctly. The nav menu is at the very bottom of the page, so you will have to scroll down to see it (on an iPhone).
    I think that if I turn the menu into a simple linked-list, it may work, but I have not tried that yet. I am not fond of the nav menu being at the bottom of the page, but I do not know of any other way to do this and still keep the layout as simple as possible.
    All comments and suggestions are most welcome.
    Thanks,
    Phillip

    #193915
    Shikkediel
    Participant

    Since the menu functions with mouse hover, it won’t work on any kind of touch device (not just iPhone). It would need some JavaScript to make it respond to tapping. I don’t think the double scrolling on the page is very user friendly (or needed) by the way.

    #193916
    santafe
    Participant

    @Shikkediel

    Thanks for the info as I was not aware of that. If I am thinking correctly, this will have to go into my media query. I appreciate the help.

    #193917
    Shikkediel
    Participant

    Touch support is a job for JavaScript though, CSS can’t detect or trigger those. It wouldn’t be a whole lot of script (but definitely a bit of work) – and making it dependent on screen size isn’t really necessary. There are quite a few touch devices with screen dimensions equal to desktop. Here’s a more ‘extreme’ example of something similar I recently made :

    http://codepen.io/Shikkediel/pen/LEyYpp

    I could have a go at the menu on your site if you like (in jQuery).

    #193926
    Paulie_D
    Moderator

    Moving to JS Jungle

    #193984
    santafe
    Participant

    @Shikkediel
    Thanks once again for your in-depth reply. Your comments have been an eye-opener for me for sure. I appreciate your jQuery offer, but for the time being I would like to stick with a purely CSS approach to this. I think my solution is to have a separate non-hover nav bar stylesheet triggered from my @media query. I will try this and see how it goes.

    Thanks again for all of your help.

    P.S. I have tried to mark this thread as SOLVED, but cannot seem to figure out how to do this as I see no checkbox to mark as solved. Thanks.

    #193988
    Shikkediel
    Participant

    Only the mods can change the topic title like that, I guess it’s not the biggest though. Gimme a shout (here) if you decide to go jQuery.

    Cheers

    #193992
    Paulie_D
    Moderator

    I think the OP can change the title too as they can edit any of their own posts.

    #193997
    santafe
    Participant

    @Shikkediel
    Thanks for the info on marking the thread as ‘Solved’.
    I, once again, am humbled by your offer of support and have one final question for you. If you take a look at Apple.com on an iPhone or similar mobile device, you will note their nav bar at the top. When you tap the left-side icon the nav titles fold down. From there you are able to finger-scroll the nav title’s horizontally. My question is this: Can that be done with purely CSS or does it require some jQuery?

    Thanks!

    #194001
    Shikkediel
    Participant

    @Paulie_D, regular members only have a certain amount of time before the edit option on the posts is disabled…


    @santafe
    , this doesn’t sound like something that could be achieved with CSS only. Especially the tap but also specific scroll adaptations (other than caused by ‘normal’ element overflow) and swiping are a job for JavaScript. Thing is, I (moderately) know how to program for touch events but don’t actually have such a device myself, lol. I usually double check with mousedown if it works – or ask for feedback. Anyway, I am not able to see the Apple.com page like you described because of this. Their site doesn’t seem to respond much to resizing either. I can’t imagine they are that much behind on things – they must have some other approach to make a distinguishment (usually JavaScript as well).

    #194004
    santafe
    Participant

    @Shikkediel
    Thanks for the feedback.
    I think I am putting the cart in front of the horse by wanting all of this cool stuff in one fell swoop. (Disclosure: This is my very first website built from purely HTML/CSS. All of my past site experience has been using Rapidweaver, so I should be grateful that I have achieved what I have thus far.)
    I appreicate your time and help.

    Phillip

    #194005
    Shikkediel
    Participant

    No problem. It’s a good approach to keep JavaScript off as much as possible – if it can be coded in HTML and CSS, that definitely has the preference. Sometimes it’s unavoidable though but not a bad thing in itself as long as you don’t overdo it (which is often tempting because one can really do great stuff with it).

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.