Question 200532 in Html Question posted in
Some basic documentation can be found here.

Html – Settings of side navigation bar

I’m trying to change the visibility of side navigation bar.

Currently,
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

when the cross mark (&times) is clicked, the side navigation bar completely hides. I want it to be partially visible, like the one below.

enter image description here

I tried to change the style option left: -20px;, but this doesn’t help.

.sidenav {
              height: 100%;
              width: 250px;
              position: fixed;
              z-index: 3;
              top: 80px;
              left: 0px;
              background-color: #111;
              overflow-x: hidden;
              transition: 0.5s;
              padding-top: 60px;
            }

Complete code

{% load static %}
<html>
    <head>
        <nav class="nav">
            <ul class="nav__links">
                <li class="nav__item">
                    <a class="nav__link" href="{% url 'home' %}">Home</a>
                </li>
                <li class="nav__item">
                    <a class="nav__link" href="{% url 'about' %}">About</a>
                </li>
                <li class="nav__item">
                    <a class="nav__link" href="{% url 'login' %}">Login</a>
                </li>
                 </ul>
        </nav>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            Visualization
        </title>
        <link rel="stylesheet" href="style.css">
        <script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
        <style>
            .graph-container {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
            }
            .main-panel {
                width: 100%;
                height: 800px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
            .side-panel {
                position: absolute;
                top: 0px;
                bottom: 0;
                right: -300px;
                width: 300px;
                background-color: red;
                transition: right 0.5s;
                overflow-y: auto;
                padding: 20px;
            }

            .side-panel.open {
                right: 0;
            }

            .arrow {
                position: absolute;
                top: 20px;
                left: 20px;
                width: 0;
                height: 0;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
                border-right: 20px solid #2196F3;
                cursor: pointer;
            }

            .arrow.open {
                transform: rotate(180deg);
            }

            .left-arrow {
                position: absolute;
                top: 20px;
                right: 20px;
                width: 0;
                height: 0;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
                border-right: 20px solid #2196F3;
                cursor: pointer;
            }

            .open .left-arrow {
                transform: rotate(180deg);
            }

            {# Added Code for side bar  #}

            .sidenav {
              height: 100%;
              width: 250px;
              position: fixed;
              z-index: 3;
              top: 80px;
              left: 0px;
              background-color: #111;
              overflow-x: hidden;
              transition: 0.5s;
              padding-top: 60px;
            }

            .open .sidenav {
               left: -20px;
            }

            .sidenav a {
              padding: 8px 8px 8px 32px;
              text-decoration: none;
              font-size: 25px;
              color: #818181;
              display: block;
              transition: 0.3s;
            }

            .sidenav a:hover {
              color: #f1f1f1;
            }

            .sidenav .closebtn {
              position: absolute;
              top: 0;
              right: 25px;
              font-size: 36px;
              margin-left: 50px;
            }

            #main {
                transition: margin-left .5s;
                padding: 16px;
                margin-left: 250px;
            }

            .form {
                border-radius: 20px;
                box-sizing: border-box;
                height: 500px;
                padding: 20px;
                width: inherit;
                font-size: 1.8rem;
            }

            .title{
                color: #eee;
                font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
                font-size: 25px;
                font-weight: 400;
                padding-left: 15px;

            }

            .input-container {
                height: 50px;
                position: relative;
                width: 100%;
            }

            .soura {
              margin-top: 40px;
            }

            .ic2 {
              margin-top: 30px;
            }

            .input {
              background-color: #303245;
              border-radius: 12px;
              border: 0;
              box-sizing: border-box;
              color: #eee;
              font-size: 18px;
              height: 100%;
              outline: 0;
              padding: 4px 20px 0;
              width: 100%;
            }

            .cut {
              background-color: black;
              border-radius: 10px;
              height: 20px;
              left: 20px;
              position: absolute;
              top: -20px;
              transform: translateY(0);
              transition: transform 200ms;

            }

            .arrowsize-cut{
                width: 80px;
            }

            .concentration-cut{
                width: 105px;
            }

            .example-cut{
                width: 140px;
            }

            .labelsize-cut{
                width: 80px;
            }

            .input:focus ~ .cut,
            .input:not(:placeholder-shown) ~ .cut {
              transform: translateY(8px);
            }

            .placeholder {
              color: #65657b;
              font-family: sans-serif;
              left: 20px;
              line-height: 14px;
              position: absolute;
              transform-origin: 0 50%;
              transition: transform 200ms, color 200ms;
              top: 20px;
            }

            .input:focus ~ .placeholder,
            .input:not(:placeholder-shown) ~ .placeholder {
              transform: translateY(-30px) translateX(10px) scale(0.75);
            }

            .input:not(:placeholder-shown) ~ .placeholder {
              color: #808097;
            }

            .input:focus ~ .placeholder {
              color: #dc2f55;
            }

            .submit {
              background-color: #08d;
              border-radius: 12px;
              border: 0;
              box-sizing: border-box;
              color: #eee;
              cursor: pointer;
              font-size: 18px;
              height: 30px;
              margin-top: 38px;
              outline: 0;
              text-align: center;
              width: 100%;
            }

            .submit:active {
              background-color: #06b;
            }

            /* Adding the button */

            @media screen and (max-height: 450px) {
              .sidenav {padding-top: 15px;}
              .sidenav a {font-size: 18px;}
            }

            /* Code for download button */

            .hide {
                max-height: 0 !important;
            }

            .dropdown{
                border: 0.1em solid white;
                width: 18em;
                margin-bottom: 1em;
                margin-top: 2rem;
                position: relative;
            }

            .dropdown .title{
                margin: .3em .3em .3em .3em;
                width: 100%;
            }

            .dropdown .title .fa-angle-right{
                float: right;
                margin-right: .7em;
                transition: transform .3s;
            }

            .dropdown .menu{
                transition: bottom .5s ease-out;
                background-color: black;
                min-width: 18rem;
                /* bottom: 7.9em; */
                border:  solid white;
                overflow: hidden;
                position: absolute;
                font-size: 10px;
            }

            .dropdown .menu .option{
                margin: .1em .1em .1em .1em;
                margin-top: 0.3em;
                color: white;
                font-size: 10px;
            }

            .dropdown .menu .option:hover{
                background: rgba(0,0,0,0.2);
            }

            .pointerCursor:hover{
                cursor: pointer;
            }

            .rotate-90{
                transform: rotate(-90deg);
            }

            .clickable {
              cursor: pointer;
              text-decoration: underline;
              color: blue;
            }

            .dropdown .download-button {
              position: absolute;
              top: 0;
              right: -60px; /* Adjust the position as needed */
              width: 50px;
              height: 100%;
              background-color: #333;
              border: none;
              border-radius: 0 4px 4px 0;
              color: white;
              font-size: 16px;
              cursor: pointer;
            }

            .dropdown .download-button i {
              margin-top: 6px;
            }

        </style>

    </head>
    <body>

        <div id = "main" style="margin-left: 7rem;">

            <div id="mySidenav" class="sidenav">
                <div class="left-arrow" onclick="toggleNav()"></div>
                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
                    <form class="form" id="myForm" action="{% url 'visualization' %}" method="post">
                      {% csrf_token %}
                      <div class = "title">settings</div>
                      <div class="input-container soura">
                      <input id="examples" class="input" name="examples" placeholder=" " onfocusout=getExampleValue() />
                      <div class="cut example-cut"></div>
                      <label for="examples" class="placeholder">
                          Examples
                          <span id="example1" class="example" onclick="setExampleValue('example1')"> #1</span>
                          <span id="example2" class="example" onclick="setExampleValue('example2')"> #2</span>
                      </label>
                      </div>
                      <div class="input-container ic2">
                          <input id="arrowsize" class="input" type="text" placeholder=" " />
                          <div class="cut arrowsize-cut"></div>
                          <label for="arrowsize" class="placeholder">arrow size</label>
                      </div>
                      <div class="input-container ic2">
                          <input id="labelsize" class="input" type="text" placeholder=" " />
                          <div class="cut arrowsize-cut"></div>
                          <label for="labelsize" class="placeholder">label font-size</label>
                      </div>
                      <button type="submit" class="submit">Submit</button>
                    </form>

                <div class='dropdown'>
                    <a class='title pointerCursor'>Download <i class="fa fa-angle-down"></i></a>
                    <div class='menu pointerCursor hide'>
                        <div class='option' id='option1'><a href="#">PNG</a></div>
                        <div class='option' id='option2'><a href="#">SVG</a></div>
                        <div class='option' id='option3'><a href="#">JPEG</a></div>
                    </div>
                    <button class="download-button"><i class="fa fa-download"></i></button>
                </div>
            </div>

            <div class="graph-container">
                <div id="network" class="main-panel"></div>
                <div id="graph" class="side-panel">
                    <div class="arrow"></div>
                </div>
            </div>

        <script src="https://kit.fontawesome.com/adf1f3a283.js" crossorigin="anonymous"></script>
        <script>

            function openNav() {
                document.getElementById("mySidenav").style.width = "250px";
                //document.getElementById("mySidenav").classList.add("open");
                document.getElementById("main").style.marginLeft = "250px";
            }

            function closeNav() {
                document.getElementById("mySidenav").style.width = "0";
                // document.getElementById("mySidenav").classList.remove("open");
                document.getElementById("main").style.marginLeft = "0";
            }

            // examples
            function setExampleValue(value) {
                document.getElementById("examples").value = value;
            }


            // download options
            const dropdownTitle = document.querySelector('.dropdown .title');
            const dropdownMenu = document.querySelector('.dropdown .menu');

            dropdownTitle.addEventListener('click', function () {
                dropdownMenu.classList.toggle('hide');
            });

            document.querySelectorAll('.dropdown .option').forEach(function (option) {
                option.addEventListener('click', function () {
                    // Handle the selected download option here
                    const selectedOption = this.textContent;
                    console.log('Selected option:', selectedOption);

                    // Display the selected option in the dropdown title
                    dropdownTitle.textContent = `Download ${selectedOption}`;

                    // Close the dropdown menu
                    dropdownMenu.classList.add('hide');
                });
            });

            function getExampleValue() {
                const fid = document.getElementById("examples").value;
                console.log(fid)

                const fpath = `${fid}.json`;

                //read the data from the json file
                fetch(fpath)
                    .then(response => response.json())
                    .then(data => {
                        var x = data.x
                    })
            }
        </script>

        </div>
    </body>
</html>

Suggestions on how to make the side navigation bar partially visible will be really helpful.

Also, to open and close the side navigation bar, I included an arrow

        <div class="left-arrow" onclick="toggleNav()"></div>

But this is not working on click, i.e., I cannot close or open the side nav. by clicking the small arrow.

enter image description here

Suggestions on how to fix these issues will be really helpful.

Tags:

2

Answers


  1. 0

    In your closeNav() function, you’re setting the width of the mySidenav element to 0px which means the element isn’t visible, so anything like left: -20px; won’t do anything because the element isn’t even there (i.e. no width!), so change 0px to 60px to make the element partially visible.

    function closeNav() {
  document.getElementById("mySidenav").style.width = "60px";
}
    Login or Signup to reply.
  2. 0

    It does not makes sense to set the width and the position at the same time. So you need to choose the best fit for what you need.
    For the openning arrow you can use a variable to keep track of the state of the sidebar (true = opened, false = closed) and call the function openNav/closeNav bassed on that. 

    let navState = false;
function toggleNav() {
  if(navState){
    closeNav();
  }else{
    openNav();
  }
  navState = !navState;
}
function openNav() {
  document.getElementById("mySidenav").classList.add("open");
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").classList.remove("open");
  document.getElementById("main").style.marginLeft = "50px";
}

    A implementation setting the position instead of the width: codepen.io

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search