Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times

    Question Responsive Drop Down Menu Progress

    Hello all,

    I'm trying to design a responsive drop down menu that switches from horizontal to vertical layout at a certain viewport width.
    I've set up a test page. It's located at this link.

    I've gotten the three horizontal pieces set up nicely as you can see, and the drop down menus are fine, but there are obvious shortcomings.

    1) the vertical graphic portions are showing when they're not supposed to, meaning I haven't correctly done an image splice. Do I need to add a container div to the start and end pieces to cut out those excess graphics? No value for height on div#menu1start will change what is shown or hidden.

    2) The main list items need a bump upward to sit nicely on the bar in the graphics. What is the recommended way to do this? Negative percentage value for margin-top had an effect.

    Those are the current obstacles at hand.

    Current styles (dropdownmenustest.css):

    Code:
    @charset "utf-8";
    /* Drop Down Menus */
    
    div#menucontainer {width:98%; margin:0 auto; height:50px;}
    /* set the horizontal div alignment for standard viewing and padding to 0 to keep the graphics together */
    @media (min-width:520px) {
        #menu1start, #menu1body, #menu1end, #menu2start, #menu2body, #menu2end {display:table-cell; padding:0;}
    }
    
    /*******************/
    /*PERSONAL NAV MENU*/
    /*******************/
    div#menu1start {
        background:url("menubgstart.gif") no-repeat scroll 50% 0 transparent;
        height:20%;
        width:50%;
        background-position:right top;
    }
    div#menu1body {
        background:url("menubgbody.gif") repeat-x scroll 50% 0 transparent;
        height:80px;
        z-index:50;
        margin:0 auto;
    }
    div#menu1end {
        background:url("menubgend.gif") no-repeat scroll 50% 0 transparent;
        height:80px;
        width:100%;
        background-position:0 0;
    }
    
    @media (max-width:520px) {
        #menu1start, #menu1body, #menu1end {margin:0 auto;}
        div#menu1start {
            background-position:center bottom;
            height:40%;
        }
        div#menu1body {
            background:url("verticalmenucenter.gif") repeat-y;
        }
    }
    
    #menu1body ul{
        margin-top:0;
        padding:0;
        display:table;
    }
    
    #menu1body li{
        list-style:none;
        padding-left:0.8em;
        position:relative;
        letter-spacing:0.085em;
        display:table-cell;
    }
    
    #menu1body li li{
        width:100%;
        padding-top:5%;
        margin-right:5%;
        text-align:left;
        list-style:square;
        list-style-position:inside;
        min-width:15%;
        letter-spacing:0.063em;
        display:block;
    }
    
    #menu1body a{text-decoration:none;}
    #menu1body li > a{
        color: #FFF;
        text-shadow:0.063em 0.063em 0.188em #000;
        -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#000000')";
        min-width:3.125em;
        padding:0.188em 0.4em;
        border:0.313em groove #BB0013;
        font-size:100%;
        font-weight:bold;
        
        /*begin main gradient*/
        background: #a90329; /* Old browsers */
        background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
        /*end main gradient*/
    }
    
    #menu1body a:hover, #menu1body li:hover a, #menu1body a:active, #menu1body li:active a{
        color:#FF0;
              
        /*begin hover gradient top level*/
        background: #a0030b; /* Old browsers */
        background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%);         /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom,             color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%);                 /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
    }
        
    #menu1body li > div{
        visibility:hidden;
        opacity:0;
        transition:visibility 0s linear .3s,opacity .3s linear;
        transition-delay:0s;
        position:absolute;
        margin-top:0.38em;
        border:0.125em solid #003;
        padding:0.25em;
        z-index:2;
            
        /*second gradient*/
        background: #9ebcbf; /* Old browsers */
        background: -moz-linear-gradient(top, #9ebcbf 0%, #7c889b 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ebcbf), color-stop(100%,#7c889b)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* IE10+ */
        background: linear-gradient(to bottom, #9ebcbf 0%,#7c889b 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ebcbf', endColorstr='#7c889b',GradientType=0 ); /* IE6-9 */
    }
    
    #menu1body li:hover div{visibility:visible; opacity:1; transition-delay:0s;}
    
    #health{width:300%;}
    #insurance{margin-left:-40%; width:16.25em;}
    #general{margin-left:-110%; width:17.5em;}
    #dating{margin-left:-110%; width:12.5em;}
    #education{margin-left:-110%; width:14.063em;}
    
    #menu1body li li a, #menu1body li:hover li a{
        color:#039;
        text-decoration:underline;
        text-shadow:none;
        background:none;
        filter:none;
        border:none;
        font-size:0.9em;
        display:inline;
    }
    
    #menu1body li li a:hover, #menu1body li li a:active, #menu1body li:hover li a:hover, #menu1body li:hover li a:active{
        text-decoration:none;
        color:#069;
    }
    
    #menu1body div a, #menu1body div a:hover, #menu1body div a:active{
        color:#0F0;
        background:none;
        filter:none;
        border:none;
    }
    
    #menu1body h3, #menu1body h2{margin:0;}
    #menu1body li li{padding:0 0.125em 0 0;}
    
    #menu1body h2{
        font-style:bold;
        text-align:left;
        font-size:1em;
        padding-left:0.188em;
    }
    #menu1body li h2 a{color:#333399; background:none; filter:none; text-decoration:underline;}
    #menu1body li:hover h2 a{color:#333399; background:none; text-decoration:underline;}
    #menu1body li:hover h2 a:hover, #menu1body li:hover h2 a:active{color:#33C; text-decoration:none;}
    
    #menu1body h3{
        text-align:left;
        color:#000000;
        font-size:1em;
        padding-left:1.25em;
    }
    #menu1body li h3 a{color:#333399; background:none; text-decoration:underline;}
    #menu1body li:hover h3 a{color:#333399; background:none; text-decoration:underline;}
    #menu1body li:hover h3 a:hover, #menu1body li:hover h3 a:active{color:#33C; text-decoration:none;}
    
    #menu1body h3 span{
        display:list-item;
        list-style-type:disc;
        list-style-position:inside;
    }
    /******************/
    /*END PERSONAL NAV*/
    /******************/
    Thanks for your help...

    Ty

  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:14 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com