Dynamically adjust left position of sliding menu

196
November 21, 2016, at 5:14 PM

I have a web site that uses a sliding menu. By default is sets left to -370px. This shows only the "MENU" text on the screen (see pictures below). When a user mouses over the menu it expands to the right and allows the user to select a menu item. If the user expands one of the items to show sub items, the menu grows as necessary. The issue is when the menu slides back in to the left. I would like the menu to ONLY show "MENU" regardless of the length of the text of the menu items. It works out to only showing the right 31px of the menu.

#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

Are you looking for something like this?

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;
}
READ ALSO
One page navigation blocking my content

One page navigation blocking my content

I tried to do a minimal version of the problem i am having. In short i am doing header with navigation that always sticks to the top of page when scrolling.

264
fullcalendar adding another eventSource

fullcalendar adding another eventSource

I want to filter events based on checkboxes. I have reviewed the code example on the mike smith website http://www.

570
Collapse accordion that has a span tag within the anchor

Collapse accordion that has a span tag within the anchor

I have an accordion for a site that within the button that activates the accordion content there resides a span tag with an icon. Normally I would use simple CSS to add the icon but this is a unique site where I can't use standard techniques due to the way it has to be embedded....

248
How to move one content div into another without rendering again?

How to move one content div into another without rendering again?

I want to move my html content from one div into another BUT WITHOUT rendering it again!.

295