Results 1 to 4 of 4

Thread: mobile template issue

  1. #1
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    20

    mobile template issue

    Recently I've been building a new template for my Troop's website. There is a mobile template built in to the CSS. Part of the mobile template turns the navigation into a slide-in menu on small-screen devices. I would like that menu to slide in with its top aligned with the top of the screen since the controlling "button" is set to position:fixed and slides up and down as the page is scrolled. Except right now the menu slides in aligned with the top of the page.

    Is there a relatively easy way to make this happen? I've tried all my limited skills in CSS and JavaScript to get it to work as desired. Link to the template:
    http://troop53.net/sandbox/template.htm
    CSS:
    http://troop53.net/css/layout.css

    A couple of things I've tried but didn't like:
    • Change <a href="javascript:menuOpen(menu)"> to <a href="#" onclick="javascript:menuOpen(menu)">. This "fakes" what I want to have happen by going to the top of the page and sliding in the menu from there. However, if the user slides the menu back without selecting a link they are left at the top of the page, not where they were prior to clicking/tapping the button.
    • Setting the navigation's position to "fixed", which works but doesn't allow the menu to be scrolled.That would be an issue on shorter screens, or when a device is rotated to landscape.


    There's still some work to do on font sizes, colors, mobile break-points, etc. but this is getting close. I'm willing to listen to other suggestions for improvement as well.

    Thanks,
    Kevin
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  2. #2
    Rick
    Join Date
    May 2002
    Location
    Minneapolis, MN
    Posts
    1,753
    Rep Power
    19
    Hmm... when I try it with the window narrowed, the menu is already aligned with the top of the screen. Did you tweak the code after you posted here?
    Rick Trethewey

  3. #3
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    20
    Hey Rick, thanks!

    I suppose I didn't explain as well as I should have. If you scroll down (window narrowed), then click on the button I want the navigation to slide out at that point, not at the top of the page. Kinda hard to describe...

    Kevin
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

  4. #4
    Thinkin' out loud again Builder's Avatar
    Join Date
    Nov 2002
    Location
    Illinois
    Posts
    2,088
    Rep Power
    20
    For better or worse I've gone with:
    <a href="#" onclick="javascript:menuOpen(menu)">

    Kind of the lesser of several evils...
    A good friend will come and bail you out of jail...
    but a true friend will be sitting next to you saying,
    "Damn... that was fun!"

Posting Permissions

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