?
Solved

vertical list in grid cell

Posted on 2013-05-31
3
Medium Priority
?
285 Views
Last Modified: 2013-06-02
Hi,

I want my vertical list to expand in a column it is in before it reaches a mobile length.
To do this (in a grid) I need to place width 100%?
What do I need to do in a grid cell as it stacks and expands on resize?

*{
    margin:0;
    padding:0;
}

/* FOR ANYTHING GREATER THAN MOBILE RESOLUTION */
@media screen and (min-width: 480px) {
   #menuv{
	  width:300px; 
	   
   }
   
    #nav-status {
        display: none;    
    }

    ul {
        width: 100%;    
        min-height: 25px;
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul li {
        color:#000;
        border-right: 1px solid #333;
        width: 96px;
        height: 21px;
        padding:2px;
       
        position: relative;    
    }

    ul li:last-child {
        border-right: none;
    }

    ul li ul {
        display: none;
        width: 100px;
        color:#fff;
        background:#666;
        position: absolute; 
        top: 0px; 
        left: 50px;
        overflow: hidden;
    }

    ul li:hover ul {
        display: block;    
    }
    .more{
        display:none;
    }
}

/* FOR MOBILE RESOLUTIONS */
@media screen and (max-width: 480px) {
    #nav-status {
        display: block;
        width: 100%;
        height: 21px;
        padding: 2px;
        background: #000;
        color: #FFF;   
    }

    ul {
        display: none;
        width: 100%;       
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul li {
        color:#000;
        border-bottom: 1px solid #333;
        width: 100%;
        min-height: 21px;
        padding:2px;
        display: block;        
        position: relative;    
    }

    ul li:last-child {
        border-bottom: none;
    }

    ul li ul {
        display: none;
        width: 100%;
        color:#fff;
        background:#eee;        
        overflow: hidden;
        position: relative;
    } 
    .more{
        display: block;
        float: right;
        margin-right: 5px;
    }
}


<script>
$(document).ready(function(){


$("#nav-status").click(function(e) {
    e.preventDefault();
    $('#navigation').toggle();
});
 $('ul > li').click(function() {
        $(this).children("ul").toggle();
    });

});
</script>

</head>

<body>


<div id="wrapper">

 <br />
 <br />
   
<div class="container-fluid">
   
    <div class="row-fluid">
     
          <div class='span12'>
     

<a href="#" id="nav-status">Open / Close</a>
<div id="menuv">
<ul id="navigation">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li>
        <a href="#">Item 5 <span class="more">></span></a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
</ul>
</div>

Open in new window

0
Comment
Question by:jagguy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39212987
Question doesn't really make sense. What is a mobile length supposed to mean?
0
 

Author Comment

by:jagguy
ID: 39213942
Mobile length is when the browser gets resized to a mobile size like 480px.
The links are supposed to adjust to the container size it is in.
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39214650
Not sure what you are wanting but...
Remove
#menuv {
    width: 300px;
}


And add float:left to
ul li {
}


If not, then make a mockup of what you want.
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question