1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Responsive Menu

Discussion in 'HTML & Website Design' started by escocia1, Jan 7, 2014.

  1. #1
    Dear Community
    i am a freelancer who uses Dreamweaver to design and code, currently moving into Responsive Web Design
    i bought a responsive menu tool and used it to create a horizontal menu of (traditional standard) 960px width
    it works perfectly on desktop screens (>1024px) and all smartphone screens (<700px) have the hamburger icon
    however, on many tablet screens, depending on device orientation, the menu wraps onto 2 lines between 701px and 959px.

    i am then informed that its not possible for this automatic tool to create responsive menus for ALL devices,
    and that i should not be making menus so wide i.e. responsive menus should not be wide? or automatic menu tools do not actually work for wide menus on all devices?

    the next suggestion was to customise the code to adjust the menu behaviour between 701px and 959px,
    which is fine if you are an experienced CSS programmer but leaves me feeling slightly let down
    and slightly worried that i now need more CSS skills to use this (supposedly) automatic responsive menu tool.

    or maybe i am missing the point and soon most tablet users will have 1024px screens?

    i appreciate your opinions.
    http://sinfronteras.edu.mx/manjeet3/index.php
    thanks!
    David
     
    escocia1, Jan 7, 2014 IP
  2. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #2
    If the screen size is 700px and the content is greater then that size either by too many items or fixed widths then of course it's going to break the layout.

    You need to change this code in this file:http://sinfronteras.edu.mx/manjeet3/p7pm3/p7PM3-01.css

    
    @media only screen and (max-width: 700px) and (min-width: 0px) {
        .p7PM3-01.responsive .pmm3-toolbar {
            background-color: rgb(34, 34, 34);
            border: 2px solid rgb(0, 0, 0);
            display: block;
            padding: 8px;
        }
    }
    @media only screen and (max-width: 700px) and (min-width: 0px) {
        .p7PM3-01.responsive ul.closed {
            display: none;
            background-color: #222;
        }
    }
    
    Code (markup):
    To this:
    
    @media only screen and (max-width: 710px) and (min-width: 0px) {
        .p7PM3-01.responsive .pmm3-toolbar {
            background-color: rgb(34, 34, 34);
            border: 2px solid rgb(0, 0, 0);
            display: block;
            padding: 8px;
        }
    }
    @media only screen and (max-width: 710px) and (min-width: 0px) {
        .p7PM3-01.responsive ul.closed {
            display: none;
            background-color: #222;
        }
    }
    
    Code (markup):
    Have a read of some of these websites. Google is your best friend.
    https://www.google.co.uk/search?hl=en&q=css3 media queries&meta=&rlz=1I7ADRA_enGB341
     
    HuggyStudios, Jan 8, 2014 IP
  3. John Michael

    John Michael Member

    Messages:
    154
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #3
    You can use bootstrap to creat responsive menu. In bootstrap when you add menu once you not need to change any style for further screen resolution again and again . The bootstrap web site adress is getbootstrap.com .Here you can also download other components of web site template and apply on your own website.
     
    John Michael, Jan 8, 2014 IP
  4. HuggyStudios

    HuggyStudios Well-Known Member

    Messages:
    724
    Likes Received:
    20
    Best Answers:
    26
    Trophy Points:
    165
    #4
    He would have to start all over again with his layout so I don't think that's the solution when he only needs to change a couple of values in his style sheet to fix his issues.
     
    HuggyStudios, Jan 8, 2014 IP
    Nigel Lew likes this.
  5. Nigel Lew

    Nigel Lew Notable Member

    Messages:
    4,642
    Likes Received:
    405
    Best Answers:
    21
    Trophy Points:
    295
    #5
    Nigel Lew, Jan 8, 2014 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #6
    If you want to turn the site into a steaming pile of poorly coded halfwit bullshit with that fat bloated idiotic crap; admittedly the user is talking about dreamweaver and off the shelf tools, so it's ALREADY that...

    Unless of course the issues run FAR, FAR deeper to the point it needs to be thrown out and completely started over from scratch using *SHOCK* semantic markup.

    Now warning for the OP; this might seem a bit harsh, but you're being led down the garden path to failure through "tools' that to be frank, you can't learn anything useful from -- and someone needs to set you on the straight and narrow.

    Step one, throw that bloated overpriced crippleware you can't learn a blasted thing from known as Dreamweaver in the trash. You are only picking up REALLY bad habits from it. Go get a plain jane text editor and learn to use it and how to actually work with HTML, CSS and the REAL browsers instead. Quite literally you need to forget ANYTHING you have learned in the process of using Dreamweaver if you are actually serious about building a website, PARTICULARLY if you are going to start caring about accessibility through things like responsive layout!

    Step two, never heard of any sort of "responsive menu tool" but it SOUNDS like some asshat bull. I would suggest tossing that too, particularly if you're talking about widths and trigger points in pixels instead of EM... of course it SOUNDS like you're still thinking presentational markup and fixed width layouts -- two things that are not at ALL compatible with any form of accessibility, INCLUDING responsive layout. Really you shouldn't be using any sort of garbage tool to do what is a few simple lines of CSS anyways. You SHOULD be worried as YES, to make a working accessible semantic responsive layout (menu or no) you're going to need a LOT more HTML and CSS skills than your example page exhibits.

    Looking at the page in question that menu one major thing that has NO business in a responsive layout --dropdowns. I've soured on them of late, and really if you "need" them there's either something wrong with a site's content or it's normal navigation. Whatever you are doing to make that menu is playing goofy scrip-ttard trickery that to be brutally Gordon, is only going to make things HARDER

    Though under the hood the gibberish use of numbered headings, broken invalid markup, and hordes of DIV for nothing certainly aren't helping matters. For example:

    <logo><a href="#"><img src="images/logo.png" alt="Logo"></a></logo>
    Code (markup):
    There is NO SUCH THING as a LOGO tag. That 'logo' should probably be a H1 with text using an image replacement method like Gilder-Levin.

    <h1>Licenciatura en Derecho con Énfasis en Derechos Humanos</h1>
            <h3>Descripción general</h3>
    Code (markup):
    Where's the H2 that H3 is a subsection of? Broken heading order... and is everythign on the page REALLY a subsection of "Law Degree focused on Human Rights"? I think not. Remember the H1 is what EVERYTHING on a page is subsections of, H2's are the starts of subsections of the H1, H3's are the start of subsections of the H2 and so forth.

    <ul type="disc">
              <h3>Perfil del egresado</h3>
                <p>El egresado de la a Licenciatura en Derechos Humanos de la Licenciatura en Derechos Humasno, de la Licenciatura en Derechocis en Derechos Humano , tendrá los siguientes actit:</p>
                <li>Empatía</li>
    Code (markup):
    The ONLY thing that can be a direct child of a OL or UL is a LI. You cannot put a H3 or P there! Also no clue why "graduate profile" would be a subsection of "Tools for the environment? Local, national or international"... Doesn't even look like the first part is an actual heading, just some random quote thrown in there or something? (My spanish is REALLY bad though, I might be misunderstanding it).

    No media target on the first CSS <link>, "ALL" on the one for the menu, Javascript doing CSS' job, HTML 5 code bloat and it's associated nonsense, presentational images in the markup, presentational classes, made up fictional tags, gibberish use of numbered headings and even some style/layout choices that cause accessibility failings... EVERYTHING I expect from dicking around in Dreamweaver instead of learning enough to build a website properly.

    I'm in the middle of making a cake from scratch (none of that crappy 'mix' garbage here), but when I'm done I'll toss together a quick rewrite to show how I'd approach that. You don't exactly have anything massive going on for that one page, so it shouldn't take long.
     
    Last edited: Jan 8, 2014
    deathshadow, Jan 8, 2014 IP
  7. escocia1

    escocia1 Active Member

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    66
    #7
    good news! they came up with a tweak for the tablet version, single row with 8 buttons splits into an elegant 2 rows with 4 buttons, a PERFECT solution!

    DS thanks for your critique, i bow to your wisdom and experience!
     
    escocia1, Jan 10, 2014 IP