Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    109
    Thanks
    21
    Thanked 0 Times in 0 Posts

    Sub Levels Not Showning

    Hello on my responsive 768 and under view when it drops down menus show way to the left and not under the parent? and now not dropping down when click on it in responsive vew

    http://codepen.io/mwbcomputers/pen/tkdwB
    Last edited by Carrara_WS; 08-17-2013 at 03:54 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    There is nothing at the link you gave. Please just post your code here in [code] tags.

    What responsive design system are you using '768' makes no sense.
    Evolution - The non-random survival of random variants.

  • #3
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    109
    Thanks
    21
    Thanked 0 Times in 0 Posts

    Responsive Sub Level Menu Not Showing.

    Hi All.

    Just about worked out my menu issue only have to that I am stumped on.

    1 is I the sub menus on "My Account" will not drop down in responsive view. From 959px down will not work.

    2 issue is the menu when in responsive view the header will not stay down it shrinks while showing the li.

    http://codepen.io/mwbcomputers/pen/HkCGA

  • #4
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    109
    Thanks
    21
    Thanked 0 Times in 0 Posts

    Here is the code

    Code:
    <div class="container">
      
    <div id="menu">
      
    <input type="checkbox" id="toggle-one" name="toggle" class="toggle-menu-input"/>
    <label for="toggle-one" class="toggle-menu-label"><span class="three-line-menu"></span>Menu</label>
      
    <ul class="mobilemenu">
      
    <li>
      <input type="checkbox" name="menu" class="menu-1"/>
      <label>Home</label>
    </li>
      
    <li>
      <input type="checkbox" name="menu" class="menu-1"/>
      <label>Login</label>
      <ul class="dropdown">
      </ul>
    </li>
      
    <li>
      <input type="checkbox" name="menu" class="menu-1"/>
      <label>Welcome, User</label>
      <ul class="dropdown">
      </ul>
    </li>
      
    <li>
      <input type="checkbox" name="menu" class="menu-1"/>
      <label>My Account</label>
      <ul class="dropdown">
        <li><a href="#">Location</a></li>
        <li><a href="#">Support</a></li>
      </ul>
    </li>
      
    </ul>
    </div>
    </div>

    Code:
    body { 
      background: url(http://s22.postimg.org/j7lnzohch/image.png); 
      background-repeat: repeat;
    }
    
    .container {
      width: 90%;
      margin: 0px auto;
      position:relative;
    }
    
    #menu {
      margin: 0px auto;
      padding: 0px;
      position: relative;
      display: block;
      width:  90%;
      z-index: 10;
      border-top:5px solid #3975a6;
    	background-color: #151515;
    	background-image: -webkit-linear-gradient(top, #252525 0%, #151515 100%);
      background-image: -moz-linear-gradient(top, #252525 0%, #151515 100%);
      background-image: -o-linear-gradient(top, #252525 0%, #151515 100%);
      background-image: -ms-linear-gradient(top, #252525 0%, #151515 100%);
      background-image: linear-gradient(top, #252525 0%, #151515 100%);
    }
    
    #menu ul.mobilemenu input[type="checkbox"] {
    	position: relative;
      display: none;
    }
    
    #menu label {
      cursor: pointer;
      font-style: normal; 
    	font-weight: normal; 
    	font-family: "PT Sans"; 
    	font-size: 14px;
    	color: #fff;
      margin: 0px;
    	padding: 0px;
    	text-align: center;
    	cursor: pointer;  
    }
    
    #menu ul.mobilemenu label {
      cursor: pointer;
      font-style: normal; 
    	font-weight: normal; 
    	font-family: "PT Sans"; 
    	font-size: 14px;
    	color: #fff;
      margin: 0px;
    	padding: 0px;
    	text-align: center;
    	cursor: pointer;  
    }
    
    #menu ul.mobilemenu {
      width: 90%;
      list-style: none;
    	margin: 0px;
      padding: 0px;
    }
    
    #menu ul.mobilemenu > li {
      float: left;
    	-webkit-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -o-transition: all 0.6s ease-in-out;
    	transition: all 0.6s ease-in-out;
      border-bottom: 3px solid #151515;
    }
    
    #menu ul.mobilemenu li:hover {
      background: #3975A6;
    	border-bottom: 3px solid #285C86;
    }
    
    #menu ul.mobilemenu li > label {
      display: block;
      padding: 13px 25px 11px 25px;
    }
    
    #menu label:hover {
      display: block;
      padding: 13px 25px 11px 25px;
    }
    
    #menu ul.mobilemenu a {
      text-decoration: none;
      padding: 13px 25px;
    }
    
    #menu ul.mobilemenu:before,
    #menu ul.mobilemenu:after {
      content: " "; 
      display: table;
    }
    
    #menu ul.mobilemenu:after {
      clear: both;
    }
    .toggle-menu-input,
    .toggle-menu-label{
      display: none;
    }
    
    /******* Sub Menu *********/
    
    #menu ul.mobilemenu li li > a {
      display: block;
    }
    
    #menu ul.mobilemenu li ul.dropdown {
      position: absolute; 
    	border: none;
    	outline: none;
    	margin: 0px;
    	padding: 0px;
    	list-style: none;
      
      -webkit-transition-property:opacity, top;
      -moz-transition-property:opacity, top;
      -o-transition-property:opacity, top;
      transition-property:opacity, top;
    		
      -webkit-transition-duration:0.3s, 0.3s;
      -moz-transition-duration:0.3s, 0.3s;
      -o-transition-duration:0.3s, 0.3s;
      transition-duration:0.3s, 0.3s;
    		
      -webkit-transition-timing-function:ease-in-out;
      -moz-transition-timing-function:ease-in-out;
      -o-transition-timing-function:ease-in-out;
      transition-timing-function:ease-in-out;
    }
    
    #menu ul.mobilemenu li ul.dropdown {
      opacity: 0;
    	visibility: hidden;
    	display: none/9;
      position:absolute;
      top: 65px;
    
    }
    
    #menu ul.mobilemenu li ul.dropdown li {
      border-bottom: 1px solid #EAEAEA; 
    	background:#FFFFFF;
    	width: 200px;
    	position: relative;
    	text-align: left;
    	cursor: pointer;
    }
    
    #menu ul.mobilemenu li:hover ul.dropdown {
      opacity: 1;
    	visibility: visible;
    	display: block/9;
    	top: 42px;
    }
    
    #menu ul.mobilemenu li ul.dropdown li:hover {
      background: #F5F5F5;
    }
    
    #menu ul.mobilemenu li ul.dropdown a {
      color: #999999;
    	text-decoration: none;
    	font-style: normal; 
    	font-weight: normal; 
    	font-family: "PT Sans"; 
    	font-size: 14px;
    }
    
    @media only screen and (max-width: 959px) {
      
      .container {
        width: 90%;
      }
     
      #menu ul.mobilemenu{
        width:100%;
      }
      
      .toggle-menu-label{
        display:block;
    		padding:15px 30px;
    		font-style:normal; 
    	  font-weight:normal; 
    	  font-family:"PT Sans"; 
    	  font-size:15px;
    	  color:#fff;
    	  border:none;
    		cursor:pointer;
      }
      
      #menu span.three-line-menu{
        float: right;
      }
      
    .three-line-menu {
    position: relative;
    margin-right: 15px;
    }
    .three-line-menu:before {
    content:"";
    position:absolute;
    float:right;
    top:0;
    width:25px;
    height:4px;
    background-color:#fff;
    box-shadow:0 12px 0 0 #fff, 0 6px 0 0 #fff;
    }
    
    #menu ul.mobilemenu > li{
    float:none;
    border-top:1px solid #8ea4b1;
    border-bottom:1px solid #6b8291;
    }
    #menu ul.mobilemenu > li:hover{
    background-color: #6b8291;
    border-bottom:1px solid #6b8291;
    }
    #menu ul.mobilemenu li > label{ 
    padding: 13px 25px 14px 25px;
    }
    #menu ul.mobilemenu label{
    text-align:left;
    }
    #menu-menu li ul.dropdown label { 
    border-bottom: 1px solid #eaeaea;
    }
    #menu ul.mobilemenu {
    position:absolute;
    opacity:0;
    visibility:hidden;
    display:none/9;
    top:75px;
    }
    #menu input.toggle-menu-input:checked ~ ul.mobilemenu {
    opacity:1;
    visibility:visible;
    display:block/9;
    top:45px;
    background-color:#7f96a6;
    -webkit-transition-property:opacity, top;
    -moz-transition-property:opacity, top;
    -o-transition-property:opacity, top;
    transition-property:opacity, top;
    -webkit-transition-duration:0.3s, 0.3s;
    -moz-transition-duration:0.3s, 0.3s;
    -o-transition-duration:0.3s, 0.3s;
    transition-duration:0.3s, 0.3s;
    -webkit-transition-timing-function:ease-in-out;
    -moz-transition-timing-function:ease-in-out;
    -o-transition-timing-function:ease-in-out;
    transition-timing-function:ease-in-out;
    }
    
    #menu ul.mobilemenu li ul.dropdown {
    opacity:0;
    visibility:hidden;
    display:none/9;
    position:absolute;
    -webkit-transition:none;
    -moz-transition:none;
    -o-transition:none;
    transition:none;
    }
    #menu ul.mobilemenu li ul.dropdown li { 
    width: 100%;
    }
    #menu ul.mobilemenu li:hover ul.dropdown	{
    opacity: 0;
    visibility: hidden;
    display: none/9;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    }
    #menu ul.mobilemenu input.menu-1 ~ ul.dropdown {
    height: 0;
    opacity: 0;
    visibility: hidden;
    display: none/9;
    }
    #menu ul.mobilemenu input.menu-1:checked ~ ul.dropdown {
    position: static;
    height:auto;
    opacity: 1;
    visibility: visible;
    display: block/9;
    }
    
    }


  •  

    Tags for this Thread

    Posting Permissions

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