javascript - 动态调整滑动菜单左侧位置

Question

我有一个使用滑动菜单的网站。默认情况下，左侧设置为 -370px。屏幕上仅显示“MENU”文本(见下图)。当用户将鼠标悬停在菜单上时，它会向右展开并允许用户选择菜单项。如果用户展开其中一项以显示子项，则菜单会根据需要而增长。问题是当菜单滑回左侧时。我希望菜单只显示“菜单”，无论菜单项的文本长度如何。结果只显示菜单右侧 31 像素。

#navigation_slideout ul li.expanding{
	height: auto 
}

.expanding  label{
	/*background-color: #AAAFAB;
	border-radius: 5px;
	color: white;
	*/
	padding: 3px;
	padding-left: 25px;
}

#navigation_slideout ul li ul li a.expanding1 { 

	padding:0;
	margin:0;
	height: auto ;
}

.expanding li > ul { 
	left:-35px;
	position:relative;
	width:100%;
}

.expanding input[type=checkbox] { 
	display: none; 
}

.expanding input[type=checkbox] ~ ul { 
	max-height: 0;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	white-space:nowrap;
   	-webkit-transition:all 1s ease;  
   	-moz-transition:all 1s ease;  
   	-o-transition:all 1s ease;  
   	transition:all 1s ease; 
}

.expanding input[type=checkbox]:checked ~ ul { 
	max-height: 100%;
	max-width: 100%;
	opacity: 1;
}

.expanding input[type=checkbox] + label:before{
	transform-origin:25% 50%;
  	border: 8px solid transparent;
  	border-width: 8px 12px;	
  	border-left-color: white;
  	margin-left: -20px;
	width: 0;
	height: 0;
	display: inline-block;
	text-align: center;
	content: '';
	color: #AAAFAB;
   	-webkit-transition:all .5s ease;  
   	-moz-transition:all .5s ease;  
   	-o-transition:all .5s ease;  
   	transition:all .5s ease; 
	position: absolute;
	margin-top: 1px;
}

.expanding input[type=checkbox]:checked + label:before {
	transform: rotate(90deg);
	/*margin-top: 6px;
  	margin-left: -25px;*/
}
#navigation_slideout {
	position: fixed;
	top: 85px;
	left: -370px;
	-webkit-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-o-transition-duration: .5s;
	transition-duration: .5s;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	-webkit-box-shadow: 0 0 40px #222;
	-moz-box-shadow: 0 0 40px #222;
	box-shadow: 0 0 40px #222;
}

 #navigation_slideout:hover {
  left: -39px;
}

#navigation_slideout ul
 {
 list-style: none;
 }

#navigation_slideout ul li {
	background: #548EBE;
	width: auto;
	min-width:325px;
	/*height: 30px;*/
	height: auto;
	text-align: left;
	padding-top: 5px;
	font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
	font-size: 12pt;
	color:white;
	font-weight:bold;

}
#navigation_slideout ul li a{
	color: #000;
	text-decoration: none;
	font-weight:bold;
	display: block;
	background-color:#548EBE;
	color:white;
}
#navigation_slideout ul li ul{ 


}

#navigation_slideout ul li ul li { 

width:10px;
position:relative;
left:-41px;
}


#navigation_slideout ul li ul li a { 
background:#548EBE;
width:326px;
height:30px;
text-align:left;
padding-top:5px;
font-family:  helvetica, arial, sans-serif;
font-size: 12pt;
color:white;
font-weight:bold;
}

#menu{
 	-ms-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg); 
	transform: rotate(-90deg); 
	font-family:HelveticaNeue,Helvetica Neue,Helvetica,Arial,sans-serif;
	font-size: 14pt;
	color:white;
	font-weight:bold;
	 margin:0px 0px 0px 0px;
	right:0px;
	padding:0px 0px 0px 0px

}

#menu a{
 	font-size: 14pt;
	color:white;
	font-weight:bold;
	text-decoration:none;
}

table.nospacing { 
border-collapse: collapse;
	border-spacing: 0;
    table-layout: fixed;


} 
table.nospacing th, td {
 padding: 0;
  }
  .menu-col{max-width: 30px;}

<div id="navigation_slideout" style="background-color:#548EBE;z-index:1"  onclick="">
  <table class="nospacing" style="border-style:none">
    <tr>
      <td style="border-style:solid">
        <ul>
          <li><a href="default_copy(1).html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Home</a></li>
          <li><a href="about/about.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About</a></li>
          <li><a href="contact/contacts.html" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contacts</a></li>           </ul>
		<hr width="200px">
		<ul style="position:relative">
          <li class="expanding"><input class="expanding" type="checkbox" id="cb1"><label class="expanding" for="cb1">Transitioning A Subject</label>
           <ul class="expanding">
              <li class="expanding1"><a class="expanding1" href="#" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Overview - Transitioning a Subject</a></li>
              <li class="expanding1"><a class="expanding1" href="#" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Pick A Topic Area</a></li>
              <li class="expanding1"><a class="expanding1" href="#" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Design Topic Area</a></li>
              <li class="expanding1"><a class="expanding1" href="#" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Set Up Config Mgmt</a></li>
              <li class="expanding1"><a class="expanding1" href="#" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Develop Topic Area</a></li>
              <li class="expanding1"><a class="expanding1" href="#" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Review Topic Area</a></li>
              <li class="expanding1"><a class="expanding1" href="#" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Publish Topic Area</a></li>
           </ul>
          </li>
          <li class="expanding"><input class="expanding" type="checkbox" id="cb2"><label class="expanding" for="cb2">Developing the Topic Area</label></li>
          <li class="expanding"><input class="expanding" type="checkbox" id="cb3"><label class="expanding" for="cb3">Useful HTML Techniques</label></li>
          <li class="expanding"><input class="expanding" type="checkbox" id="cb4"><label class="expanding" for="cb4">Best Practice Examples</label></li>
        </ul>
    </td>
    <td   class="menu-col" style="border-left:medium;border-left-color:white;border-left-style:solid">
      <p id="menu"><a href="#" onclick=";return false;">MENU</a></p>
  </td>

    </tr>
</table>
</div>

Answer 1

您正在寻找这样的东西吗？

https://jsfiddle.net/DIRTY_SMITH/ru9joppk/2/

Javascript:

function width(){
var width = document.getElementById("navigation_slideout").offsetWidth;
var offsetWidth = width - (width + width - 35);
document.getElementById('navigation_slideout').style.width = width + "px";
document.getElementById('navigation_slideout').style.left = offsetWidth + "px";
}

CSS

 #navigation_slideout:hover {
  left: -39px !important;
}