Estoy usando el mismo código en mi sitio web. ¿Hay alguna forma de abrir la barra de navegación y superponerla a la derecha, sin empujar el contenido a la derecha? https://codepen.io/dalisc/pen/qzRGxQ
Experimenté con la posición y el índice z, pero no ayudó. Gracias
<div id="mySidebar" class="sidebar" onmouseover="toggleSidebar()" onmouseout="toggleSidebar()"> <div class="navContent"> <a href="#">YOUR DASHBOARD</a><br> <a href="#">MESSAGE CENTER</a><br> <a href="#">IMPACT & OUTCOMES</a><br> <a href="#">LEARNERS</a><br> <a href="#">PROGRAMS</a> <a href="#">SETTINGS</a> </div> </div> .sidebar { height: 100%; width: 85px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #181633; transition: 0.5s; padding-top: 120px; white-space: nowrap; overflow-x: hidden; } .sidebar a { padding: 3px 8px 3px 32px; text-decoration: none; font-size: 16px; color: #D3D2E4; display: block; }establecer document.getElementById("mySidebar").style.width = "85px"; en lugar de document.getElementById("mySidebar").style.width = "250px";
var mini = true; function toggleSidebar() { if (mini) { //console.log("opening sidebar"); document.getElementById("mySidebar").style.width = "250px"; /*change this line*/ document.getElementById("main").style.marginLeft = "85px"; /*change this line*/ this.mini = false; } else { //console.log("closing sidebar"); document.getElementById("mySidebar").style.width = "85px"; document.getElementById("main").style.marginLeft = "85px"; this.mini = true; } } body { font-family: "Lato", sans-serif; } .sidebar { height: 100%; width: 85px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; transition: 0.5s; overflow-x: hidden; padding-top: 60px; white-space: nowrap; } .sidebar a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; } .sidebar a:hover { color: #f1f1f1; } main .sidebar { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } .material-icons, .icon-text { vertical-align: middle; } .material-icons { padding-bottom: 3px; margin-right: 30px; } #main { padding: 16px; margin-left: 85px; transition: margin-left 0.5s; } @media screen and (max-height: 450px) { .sidebar { padding-top: 15px; } .sidebar a { font-size: 18px; } } <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <div id="mySidebar" class="sidebar" onmouseover="toggleSidebar()" onmouseout="toggleSidebar()"> <a href="#"><span><i class="material-icons">info</i><span class="icon-text">about</span></a><br> <a href="#"><i class="material-icons">spa</i><span class="icon-text"></span>services</a></span> </a><br> <a href="#"><i class="material-icons">monetization_on</i><span class="icon-text"></span>clients</span></a><br> <a href="#"><i class="material-icons">email</i><span class="icon-text"></span>contact<span></a> </div> <div id="main"> <h2>Open/Collapse Sidebar on Hover</h2> <p>Hover over any part of the sidebar to open the it.</p> <p>To close the sidebar, move your mouse out of the sidebar.</p> </div>código abierto aquí