Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: prevent menu selections from wrapping

  1. #1
    Join Date
    Dec 2015
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default prevent menu selections from wrapping

    When screen width is less then the design width(1200px) menu selections on the right are pushed down below the menu and to the left.

    The 11 menu selections are list items with the drop down being an unsorted list containing list items. Float left is used to align the 11 selections side by side

    Is there something that will keep all menu selections on the same line?

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Hard to say without some sample markup and CSS to work with.

    A live page works best so we can offer suggestions based on *your code* - cut back to the pertinent parts to make things easier to see (no one like wading through lots of code)

    If you can't post a link for a page on your server, you can build up a live demo in JSBin, JSFiddle or CodePen, then post a link to that instead.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Dec 2015
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I'm not sure what you mean by 'selections' but if you mean that you want all the top level li buttons to stay say on one line, try adding a width to #navmenu. E.g;
    Code:
    #navmenu { width:1200px }
    However, this will make the buttons on the right inaccessible on small screens.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. The Following User Says Thank You to Beverleyh For This Useful Post:

    ChuckRS (01-14-2016)

  6. #5
    Join Date
    Dec 2015
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Beverleyh - thanks for checking up on me.

    Is there a different CSS that will enable a right scroll to access all buttons?

    Can z-index be used so top level button selections will display over buttons that are below?
    Last edited by ChuckRS; 01-14-2016 at 08:12 AM.

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Can z-index be used so top level button selections will display over buttons that are below?
    Yes, if you remove this;
    Code:
    ul#navmenu li { z-index:1; }
    You might want to re-think this menu though because in the fiddle, the dropdowns don't work on iOS (iphone / ipad)
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  8. The Following User Says Thank You to Beverleyh For This Useful Post:

    ChuckRS (01-14-2016)

  9. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Here's something more streamline to start you off https://jsbin.com/pebajajaca/1/edit?html,css,output

    Be aware that hover-activation behaviour differs between Android and iOS, so parent buttons with sub-menus shouldn't be linked (hence why I've used javascript:void(0) in the demo). This is because on Android the href is immediately activated, so there would be no way to access the sub-menus underneath. iOS however, allows a 2-stage tap where, even if the parent has a link, the first tap activates the dropdowns and the 2nd tap activates the parent's href.
    Last edited by Beverleyh; 01-14-2016 at 09:51 AM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  10. The Following User Says Thank You to Beverleyh For This Useful Post:

    Ripsaw (01-14-2016)

  11. #8
    Join Date
    Dec 2015
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Removal of z-index:1 from ul#navmenu li gave the exact result I wanted. Though here in Houston, I will raise a Crunchie or Rowntrees Fruit Pastilles to you

    I will look into the iOS matter but not sure if the modification would be effective due to the small screens. The site is up to 1,200 images (GIF and JPEG) with the vast majority being 1000px to 1200px wide with almost every page having some of them. The site was designed around the size needed to adequately show the content so screen resolution of viewing devices was not a concern. Sorta after the fact, I looked into screen resolution and found width of 1280px and up is the vast majority of monitors.

    My folder structure will need adjustments but will wait until the construction is finished. For now I am letting the content determine what goes where

  12. #9
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    I will look into the iOS matter but not sure if the modification would be effective due to the small screens.
    Its not so much the size that's an issue, but the accessibility of your content. At the moment, the sub-menus cannot be activated on any iOS touch device, so how will visitors explore your site?. All this demo is, is an alternative CSS hover menu (as free from styling as I can make it without losing the essence of its usability), which *does* work in an iOS touch environment, so that you can add your own styles back to it.

    You have no control over how your visitors choose to view your website (Kindle, iPad, their TV, or the latest Surface Pro) so I'm just trying to give you a slightly more accessible route to allow them to reach your content.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  13. #10
    Join Date
    Dec 2015
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    The site should at least be accessible via iOS and will so modify the menu. Thanks for your time and passing on your expertise

Similar Threads

  1. Replies: 0
    Last Post: 07-08-2011, 04:46 PM
  2. Resolved Instantly update bottom frame when user changes menu selections in top frame
    By jddela in forum Looking for such a script or service
    Replies: 11
    Last Post: 11-10-2010, 12:50 PM
  3. horizontal menu keeps wrapping around
    By adamhaynes in forum CSS
    Replies: 2
    Last Post: 08-10-2010, 12:03 AM
  4. Filtering selections
    By chuco61 in forum HTML
    Replies: 0
    Last Post: 05-28-2009, 07:30 PM
  5. Multiple selections between pages
    By jtreg in forum JavaScript
    Replies: 0
    Last Post: 12-03-2004, 07:15 PM

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
  •