SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    May 2013
    Posts
    204
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    500px-767px mobile display appear TWO vertical menus rather one

    in development of a responsive web design,... in vertical menu 8-rows what is the trick at 100% display width,.. in 320px-499px mobile display appear a vertical menu 8-rows but in 500px-767px mobile display appear TWO vertical menus(propably one continued in 5th li tag to second row) 4-rows each 50% each of display...?

    I do NOT mean for media query syntax(i know well this), but for alignment of li elements css syntax... well?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,551
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lse123 View Post
    in development of a responsive web design,... in vertical menu 8-rows what is the trick at 100% display width,.. in 320px-499px mobile display appear a vertical menu 8-rows but in 500px-767px mobile display appear TWO vertical menus(propably one continued in 5th li tag to second row) 4-rows each 50% each of display...?

    I do NOT mean for media query syntax(i know well this), but for alignment of li elements css syntax... well?
    Hi,

    Do you have an example of where you have seen this so we can dissect it for you?

    I can think of various ways of making two lists into one such as setting 50% width on the list elements so that they are floated side by side and then at small screen widths make them 100% so they fall vertically. Or you could use two separate uls with both blocks floated but at 50% width on larger screens and then 100% width and not floated on smaller screens so that the second block lines up underneath.

    Or (although a little wasteful) you could have two unique menus with different structures and hide one or the other at the various screen width as required by the media query. A lot of mobile sites do this and display a menu button instead of a whole menu.

  3. #3
    SitePoint Addict
    Join Date
    May 2013
    Posts
    204
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,551
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry I missed your reply yesterday.

    Is that link the site you are working on or just one that displays the issue you want to mimic?

    If you can clarify which lists should be side by side then I'll take another look but it will obviously involve a media query at some stage to change the property/values as required.

  5. #5
    SitePoint Addict
    Join Date
    May 2013
    Posts
    204
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    tell me code for this url example.html

    yes i know media query needed so provide the code. that said is that i know media query theory not to explain to me. just create a media query 480<x<768, and put css in it...

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,551
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lse123 View Post
    tell me code for this url example.html
    I'll need the html that you want to be used for this task and if you answer the points in my last reply.

  7. #7
    SitePoint Addict
    Join Date
    May 2013
    Posts
    204
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    <ul class="navLinks">
    <li><h1 style="padding:5px"><a href="../index.htm">Home Page</a></h1></li>
    <li><a href="../description.htm">Description</a></li>
    <li><a href="../prices.htm">Prices</a></li>
    <li><a href="../book.php">Book/Quote Get</a></li>
    <li><a href="../availability.htm">Availability</a></li>
    <li><a href="../photos.htm">Photos</a></li>
    <li><a href="../location.htm">Location/Maps</a></li>
    <li><a href="../terms.htm">Terms</a></li>
    </ul>
    etc css get from INSPECT ELEMENT - CHROME


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
  •