0

我有一个可扩展的菜单，它从一个细左手栏弹出（打开人和关闭菜单类型）

大多数时间，它将占用大约 50px，除非它打开时，大约 250。

我希望我的#content div 是余数的 100%。因此，当菜单打开时，它的 100% 页面 - 50px 然后 100% 页面 -250px。

Bellow 是我的 HTML，我需要哪些基本的 CSS 来实现这一点？

请注意，我已将 exra 行放入，以分离包装器内部的 2div

 <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>

救命图...

菜单已关闭

|---------------------------------------------------------------------|
|                    THIS IS THE #WRAPPER DIV @100%                   |
||----| |------------------------------------------------------------||
||    | |                                                            ||
||    | |                                                            ||
||THIS| |          THIS IS THE #CONTENT DIV                          ||
||IS  | |          @100%                                             ||
||THE | |                                                            ||
||SIDE| |                                                            ||
||-BAR| |                                                            ||
||DIV | |                                                            ||
||@   | |                                                            ||
||20px| |                                                            ||
||    | |                                                            ||
||    | |                                                            ||
||    | |                                                            ||
||    | |                                                            ||
||----| |------------------------------------------------------------||
|                                                                     |
|---------------------------------------------------------------------|

菜单打开

|---------------------------------------------------------------------|
|                    THIS IS THE #WRAPPER DIV @100%                   |
||--------------| |--------------------------------------------------||
||              | |                                                  ||
||              | |                                                  ||
||THIS          | |          THIS IS THE #CONTENT DIV                ||
||IS            | |          @100%                                   ||
||THE           | |                                                  ||
||SIDE          | |                                                  ||
||-BAR          | |                                                  ||
||DIV           | |                                                  ||
||@             | |                                                  ||
||250           | |                                                  ||
||px            | |                                                  ||
||              | |                                                  ||
||              | |                                                  ||
||              | |                                                  ||
||--------------| |--------------------------------------------------||
|                                                                     |
|---------------------------------------------------------------------|

这是我一直在测试的代码

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"); }

在哪里

<a href="#" onclick="menuhide"><div id="logo" class="logo"></div></a>

和

<a href="#" onclick="menushow"><div id="logo" class="logo"></div></a>

和

<div id="content" class="content">
4

2 回答 2

0

为什么不使用屏幕/文档宽度属性？

使用 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");
}

相似的东西。希望这对你有帮助

或使用 javascript http://www.w3schools.com/jsref/prop_screen_width.asp

<script>
screen_width = screen.width;
</script>
于 2013-02-21T10:53:16.420 回答
0

采用

<script language="JavaScript">
onload=function(){
var login=document.getElementById('logo');
var target=document.getElementById('content');
login.onclick=function(){
target.style.paddingLeft=target.style.paddingLeft=='260px'?'75px':'260px';
}
}
</script>

其中logo是您单击的 div 的 id，而content是目标 - 您希望更改样式的 div...

需要注意的一件事是你的 CSS 应该有开始填充

.content {
padding-left: 75px; 
}

否则它将最初加载为 0px 填充，然后更改为您单击的宽度，然后返回到未单击的...下面的示例

0px -> 260px -> 75px -> 260px -> 75px -> 260px -> 75px -> 260px -> 75px ->

等等等等...

于 2013-02-22T10:18:04.193 回答