I have an expandable menu, which pops out from a thin left hand bar (open men and close menu type)
Majority if the time, it will take up around 50px, except when it is open, when its about 250.
I want my #content div to be 100% of remainder. So its 100% page - 50px then 100% page -250px when the menu it open.
Bellow is my HTML, what are my fundamental CSS that I need to make this occur?
note I have put exra lines in, to seperate out the 2divs indside the wrapper
<div class="wrapper">
.
<div class="sidebar" id="sidebar">
<a href="#" onclick="return showOrHide('menulink');"><div class="logo"></div></a>
<ul id="menulink">
<li>
<a href="#">Campaigns</a>
<ul class="submenu">
<li><a href="http://insideclients.co.uk/Summary.aspx">Summary Sheet</a></li>
<li><a href="http://insideclients.co.uk/Clients.aspx">Add New Client</a></li>
<li><a href="http://insideclients.co.uk/Search.aspx">Search Historic</a></li>
</ul>
</li>
<li>
<a href="#">Transactions</a>
<ul class="submenu">
<li><a href="http://insideclients.co.uk/Links.aspx">Record Transaction</a></li>
<li><a href="http://insideclients.co.uk/LinksSummary.aspx">Transaction Sheet</a></li>
</ul>
</li>
<li>
<a href="#">Production</a>
<ul class="submenu">
<li><a href="http://insideclients.co.uk/ProductionHandover.aspx">Create Handover</a></li>
<li><a href="http://insideclients.co.uk/ProductionHandoverSearch.aspx">Handover Sheets</a></li>
<li><a href="http://insideclients.co.uk/ProductionHandoverSummary.aspx">Production Overview</a></li>
</ul>
</li>
<li>
<a href="#">Reporting</a>
<ul class="submenu">
<li><a href="http://insideclients.co.uk/SummaryAltView.aspx">Transaction Report</a></li>
<li><a href="http://insideclients.co.uk/LinksSummary.aspx?CampaignID=95">View Team Costs</a></li>
</ul>
<li>
<a href="#">Admin</a>
<ul class="submenu">
<li><a href="http://insideclients.co.uk/Users.aspx">Manage Users</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</li>
</ul>
</div>
.
<div class="content">
<p>CONTENT HERE</p>
</div>
.
</div>
Diagram to the rescue...
MENU CLOSED
|---------------------------------------------------------------------|
| THIS IS THE #WRAPPER DIV @100% |
||----| |------------------------------------------------------------||
|| | | ||
|| | | ||
||THIS| | THIS IS THE #CONTENT DIV ||
||IS | | @100% ||
||THE | | ||
||SIDE| | ||
||-BAR| | ||
||DIV | | ||
||@ | | ||
||20px| | ||
|| | | ||
|| | | ||
|| | | ||
|| | | ||
||----| |------------------------------------------------------------||
| |
|---------------------------------------------------------------------|
MENU OPEN
|---------------------------------------------------------------------|
| THIS IS THE #WRAPPER DIV @100% |
||--------------| |--------------------------------------------------||
|| | | ||
|| | | ||
||THIS | | THIS IS THE #CONTENT DIV ||
||IS | | @100% ||
||THE | | ||
||SIDE | | ||
||-BAR | | ||
||DIV | | ||
||@ | | ||
||250 | | ||
||px | | ||
|| | | ||
|| | | ||
|| | | ||
||--------------| |--------------------------------------------------||
| |
|---------------------------------------------------------------------|
THIS IS THE CODE I HAVE BEEN TESTING
function menushow()
{
screen_width = $(window).width() ; // returns width of browser viewport
//alert($(document).width()); // returns width of HTML document
//calculate content div width
cont_div_width = screen_width - 250;
("#content").css("width",cont_div_width+"px");
}
function menuhide()
{
screen_width = $(window).width() ; // returns width of browser viewport
//alert($(document).width()); // returns width of HTML document
//calculate content div width
cont_div_width = screen_width - 50;
("#content").css("width",cont_div_width+"px"); }
where
<a href="#" onclick="menuhide"><div id="logo" class="logo"></div></a>
and
<a href="#" onclick="menushow"><div id="logo" class="logo"></div></a>
and
<div id="content" class="content">
why dont you make use of screen/doc width property?
using jquery http://api.jquery.com/width/
function menushow()
{
screen_width = $(window).width() ; // returns width of browser viewport
//alert($(document).width()); // returns width of HTML document
//calculate content div width
cont_div_width = screen_width - 250;
("#idofcontent_div").css("width",cont_div_width+"px");
}
function menuhide()
{
screen_width = $(window).width() ; // returns width of browser viewport
//alert($(document).width()); // returns width of HTML document
//calculate content div width
cont_div_width = screen_width - 50;
("#idofcontent_div").css("width",cont_div_width+"px");
}
something similar. hope this helps you
or using javascript http://www.w3schools.com/jsref/prop_screen_width.asp
<script>
screen_width = screen.width;
</script>