jagguy
asked on
vertical list in grid cell
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?
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>
Question doesn't really make sense. What is a mobile length supposed to mean?
ASKER
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.
The links are supposed to adjust to the container size it is in.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.