Question 213303 in Javascript Question posted in
A very good W3school tutorial can be found here.

how to position an element using javascript..?

I’ve hidden my navbar using position. now I want navbar to appear when hamberger icon is clicked.

that’s how tried,

    var menubtn = document.getElementById("menubtn")
    var rspnsvnavlist = document.getElementById("rspnsvnavlist")
        rspnsvnavlist.style.position = "left(-350px)";        
        menubtn.onclick = function (){
       
        if(rspnsvnavlist.style.position = "left(350px)"){
           rspnsvnavlist.style.position = "left(0)";
        }
        else{
           rspnsvnavlist.style.position = "left(350px)";
        }
    }
Tags:

3

Answers


  1. 0

    Maybe this would help,

    the position property is used for static
    relative
    fixed
    absolute
    sticky

    you should try :
    rspnsvnavlist.style.left = "350px";

    Login or Signup to reply.
  2. 0

    Question, there seems to be no animation to wanna move the element from a side to another, is there a reason not to just dissapear the element with the display property, and change it on click? example

     var menubtn = document.getElementById("menubtn")
 var rspnsvnavlist = document.getElementById("rspnsvnavlist")
        
        //hides the element
        rspnsvnavlist.style.display = "none";        
        menubtn.onclick = function (){
       
        //restore the element if it was hidden
        if(rspnsvnavlist.style.display == "none"){
           rspnsvnavlist.style.position = "block";
        }
        else{
           //hide the element if it was showing
           rspnsvnavlist.style.display = "none)";
        }
    }
    Login or Signup to reply.
  3. 0 
    function toggle( button, label='open' ){
    const id = button?.dataset?.refId;
    const element = document.getElementById( id );
    
    if ( !element ) return null;
    
    if ( element.classList.contains( label ) ) 
        element.classList.remove( label );
    else 
        element.classList.add( label );
}
    html, body {
    position: relative;
    display:block;
    width: 100%;
    height: 100%;
    padding: unset;
    margin: unset;
    overflow: hidden;
}

#page-header {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto 1fr auto;
    text-align: center;
    align-items: center;
    width: 100%;
    height: 75px;
}

#page-header > div {
    padding: 1rem;
}

#page-header h1 {
    margin: unset;
}

#page-menu-left {
    position: absolute;
    top: 75px;
    left: -50%;
    bottom: 0;
    display: block;
    width: 30vw;
    padding: 1rem;
    background: #eee;
    transition: 1s ease left;
}

#page-menu-left.open {
    left: 0;
}

#page-menu-right {
    position: absolute;
    top: 75px;
    right: -50%;
    bottom: 0;
    display: block;
    width: 30vw;
    padding: 1rem;
    background: #eee;
    transition: 1s ease right;
}

#page-menu-right.open {
    right: 0;
}

.bars-menu {
    cursor: pointer;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />


<aside id="page-menu-left">Left Sidebar</aside>
<header id="page-header">
    <div>
        <button class="bars-menu" onclick="toggle(this)" data-ref-id="page-menu-left"><i class="fa-solid fa-bars"></i></button>
    </div>
    <div>
        <h1>Title</h1>
    </div>  
    <div>
        <button class="bars-menu" onclick="toggle(this)" data-ref-id="page-menu-right"><i class="fa-solid fa-bars"></i></button>
    </div>
</header>
<main>
    Document Body
</main>
<footer>
    Document Footer
</footer>
<aside id="page-menu-right">Right Sidebar</aside>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search