導航欄更多在右側

Question

我創建了一個出現在右側的可懸停的側邊導航欄。 我面臨的問題是導航欄沒有達到我想要的程度。 我希望導航欄與瀏覽器頁面的側面接觸到只顯示導航欄的一小部分的點。 有人可以幫我解決這個問題嗎？ 謝謝你。

更具體地說，導航欄應該在哪里，我已經圈出了我想要的地方：

這就是我希望導航欄顯示的方式：

這是它在懸停時的樣子：

 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>

Answer 1

它應該通過稍微更改 css 來工作。 請看下面的演示

更改了 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;
}

我已將顏色設置為透明，因此如果不懸停它就會隱藏，並且還將位置從left更改為right 。 接下來將懸停狀態顏色更改為白色以顯示文本。

更新

我已經更改了邊框半徑，因此它位於項目的左側。 位置也更改為fixed以刪除滾動條並使菜單始終位於該位置（即使使用垂直滾動條）。

Answer 2

它應該像更改 css 一樣簡單。 在您的 html 代碼中，您將導航欄包裹在名為“blip”的 div 內。 這意味着當您設置以下內容時：

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

您這樣做是為了使整個 div 是頁面右側整個寬度的 25%。 只需將 'right' 的值設置為 0，您就應該擁有您想要的東西！

導航欄更多在右側

問題描述

2 個解決方案

解決方案1
1 2020-01-11 21:50:09

解決方案2
0 2020-01-11 21:48:51

導航欄更多在右側

問題描述

2 個解決方案

解決方案1 1 2020-01-11 21:50:09

解決方案2 0 2020-01-11 21:48:51

解決方案1
1 2020-01-11 21:50:09

解決方案2
0 2020-01-11 21:48:51