CODEWITHSUNDEEP
javascripthtmlcss
Jess
Jess

Reputation: 123

Navbar more on the right side

I have created a hoverable side navigation bar that appears on the right-hand side. The issue I am facing is that the navigation bar does not go as far as I want it to. I want the navigation bar to touch the side of the browser page to the point where only a little bit of the navigation bar shows. Can someone help me fix this? Thank you.

This is the link to W3S to show you where I got the code from

To be more specific as to where the navigation bar should be I have circled the place where I want it to be:

enter image description here

This is how I want the navigation bar to show:

enter image description here

This is how it is supposed to look like on hover:

enter image description here

body{
    margin:0;
    font-family:'Montserrat';
}

.polymorph{    
  fill:#EDE1DB;
    }

#showdashboard, #goback{
    position:absolute;
    margin: 80px auto 0 auto;
    left:0;
    right:0;
    width:30%;
    background:none;
    border: 1px solid #163C68;
    border-radius: 5px;
    color:#163C68;
    font-size: 20px;
    cursor:pointer;
    outline:0;
}

#gobutton{
    width: auto;
    margin: 30px auto;
    background: #AAC0AA;
}

#blip{
    position:fixed;
    color:#298BE2;
    right:25%;
    top:0;
    opacity: 0;
    width: 30%;
    transform: translateY(-800px);
}

#mySidenav a {
  position: absolute;
  right: -80px;
  transition: 0.3s;
  padding: 15px;
  width: 100px;
  text-decoration: none;
  font-size: 20px;
  color: #163C68;
  border-radius: 5px 0 0 5px;
}

#mySidenav a:hover {
  right: 0;
}

#about {
  top: 20px;
  background-color: #EDE1DB;
}

#blog {
  top: 80px;
  background-color: #EDE1DB;
}

#projects {
  top: 140px;
  background-color: #EDE1DB;
}

#contact {
  top: 200px;
  background-color: #EDE1DB
}
<!DOCTYPE hmtl>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="Meter Dashboard Animation">
        <link rel="stylesheet" href="LandingPage.css">
    </head>
    
    <body>
        <button id="showdashboard">Show Meter Dashboard</button>
        <svg viewBox="0 0 237.5 104.8" >
            <polygon class="polymorph" points="237.5,104.8 0,104.8 0,0 63.9,0 237.5,0"/>
        </svg>
        <div id="blip">
            <div id="mySidenav" class="sidenav">
                <a href="#" id="about">About</a>
                <a href="#" id="blog">Blog</a>
                <a href="#" id="projects">Projects</a>
                <a href="#" id="contact">Contact</a>
            </div>
            <button id="goback">Back</button>
        </div>
        <script src="anime.min.js"></script>
        <script>
            var revealbtn = document.getElementById('showdashboard');
            var backbtn = document.getElementById('goback');
            
            revealbtn.onclick = function(){
                var morphing = anime({
                    targets: '.polymorph',
                    points: [
                        {value:'237.5,104.8 0,104.8 0,0 63.9,0 33.9,63.6'},
                        {value:'237.5,104.8 0,104.8 0,0 0,0 33.9,63.6'}
                    ],
                    easing: 'easeOutQuad',
                    duration: 800,
                    loop: false
                });
                
                anime({
                    targets: '#blip',
                    opacity: 1,
                    duration: 1000,
                    translateY: 250
                })
                
                var promise = morphing.finished.then(()=>{
                    backbtn.onclick = function(){
                        var morphing = anime({
                            targets: '.polymorph',
                            points:[
                                {value:'237.5,104.8 0,104.8 0,0 63.9,0 33.9,63.6'},
                                {value:'237.5,104.8 0,104.8 0,0 63.9,0 237.5,0'},
                            ],
                            easing: 'easeOutQuad',
                            duration: 800,
                            loop: false
                        });
                        
                        anime({
                            targets:'#blip',
                            opacity: 0,
                            duration: 1000,
                            translateY: -800
                        })
                    };
                })
            }
        </script>
    </body>
</html>

Upvotes: 0

Views: 220

Answers (2)

AWolf
AWolf

Reputation: 8970

It should work by changing the css slightly. Please have a look at the following demo

Changed CSS

#mySidenav a {
  position: fixed;
  right: -80px;
  transition: 0.3s;
  padding: 15px;
  width: 100px;
  text-decoration: none;
  font-size: 20px;
  color: transparent;
  border-radius: 5px 0px 0px 5px;
}

#mySidenav a:hover {
  right: 0;
  color: white;
}

I've set the color to transparent so it's hidden if not hovered and also changed the position from left to right. Next change the hover state color to white to display the text.

Update

I've changed the border radius so it's on the left egde of the items. Also position changed to fixed to remove the scrollbar and to have the menu always on that position (even with a vertical scrollbar).

Upvotes: 1

jokai_
jokai_

Reputation: 79

It should be as simple as changing your css. In your html code, you have the navigation bar wrapped inside of a div with the name of "blip". This means that when you set the following:

    #blip{
      position: absolute;
      right: 25%;
    }

You are making it so that the entire div is 25% of the entire width of the page FROM the right-hand side. Simply set the value of 'right' to 0 and you should have what you want!

Upvotes: 0

Related Questions