如何在移动视图中切换我的导航栏以便滑动显示？

huangapple
go评论96阅读模式
英文:

how to toggle my navbar to slide over in mobile view?

问题

I want my navbar to slide over by clicking on its icon in mobile view, but I'm having some problems with that. It's not sliding over by clicking. I'm sure I have followed the right js syntax for it.

  1. let navbar = document.querySelector(".navbar");
  2. document.querySelector("#menu-btn").onclick = () => {
  3.   navbar.classList.toggle("active");
  4. }
  1. .header .navbar {
  2.   position: absolute;
  3.   top: 100%;
  4.   left: -100%;
  5.   background: #13131a;
  6.   width: 30rem;
  7.   height: calc(100vh - 9.5rem);
  8.   align-items: flex-start;
  9.   flex-direction: column;
  10.   justify-content: flex-start;
  11.   overflow: hidden;
  12. }
  14. .header .navbar.active {
  15.   left: 0;
  16. }
  1. <div class="navbar mx-auto ">
  2.   <a asp-action="Index">صفحه اصلی</a>
  3.   <a href="#products">محصولات</a>
  4.   <a href="#about">درباره ما</a>
  5.   <a href="#contact">ارتباط با ما</a>
  6. </div>
  7. <div class="icons">
  8.   <i class="fa-solid fa-cart-shopping "></i>
  9.   <i class="fa-solid fa-magnifying-glass "></i>
  10.   <i class="fa-solid fa-right-to-bracket "></i>
  11.   <i class="fa-solid fa-bars" id="menu-btn"></i>
  12. </div>

I just don't know where I'm going wrong.
the CSS class is changing when I click on the bar icon but not sliding over the navbar.

英文:

I want my navbar to slide over by clicking on its icon in mobile view, but I'm having some problems with that. It's not sliding over by clicking. I'm sure I have followed the right js syntax for it.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. let navbar = document.querySelector(&quot;.navbar&quot;);
  2. document.querySelector(&quot;#menu-btn&quot;).onclick = () =&gt; {
  3.   navbar.classList.toggle(&quot;active&quot;);
  4. }

<!-- language: lang-css -->

  1. .header .navbar {
  2.   position: absolute;
  3.   top: 100%;
  4.   left: -100%;
  5.   background: #13131a;
  6.   width: 30rem;
  7.   height: calc(100vh - 9.5rem);
  8.   align-items: flex-start;
  9.   flex-direction: column;
  10.   justify-content: flex-start;
  11.   overflow: hidden;
  12. }
  14. .header .navbar .active {
  15.   left: 0;
  16. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;navbar mx-auto &quot;&gt;
  2.   &lt;a asp-action=&quot;Index&quot;&gt;صفحه اصلی&lt;/a&gt;
  3.   &lt;a href=&quot;#products&quot;&gt;محصولات&lt;/a&gt;
  4.   &lt;a href=&quot;#about&quot;&gt;درباره ما&lt;/a&gt;
  5.   &lt;a href=&quot;#contact&quot;&gt;ارتباط با ما&lt;/a&gt;
  6. &lt;/div&gt;
  7. &lt;div class=&quot;icons&quot;&gt;
  8.   &lt;i class=&quot;fa-solid fa-cart-shopping &quot;&gt;&lt;/i&gt;
  9.   &lt;i class=&quot;fa-solid fa-magnifying-glass &quot;&gt;&lt;/i&gt;
  10.   &lt;i class=&quot;fa-solid fa-right-to-bracket &quot;&gt;&lt;/i&gt;
  11.   &lt;i class=&quot;fa-solid fa-bars&quot; `id=&quot;menu-btn&quot;`&gt;&lt;/i&gt;
  12. &lt;/div&gt;

<!-- end snippet -->

I just don't know where I'm going wrong.
the CSS class is changing when I click on the bar icon but not sliding over the navbar.

答案1

得分: 0

I think the main problem with your css is:

  1. .header .navbar .active {
  2.   left: 0;
  3. }

Since there is a space between .active it will look for an element inside the navbar div with the class active, but there isn't one.

So instead this should be

  1. .header .navbar.active {
  2.   left: 0;
  3. }

Other minor things:
id=&quot;menu-btn&quot; had some backticks around it in your example which should be removed.

You haven't included the header class in your example, but I think that should be ok as long as it's in an element wrapping everything.

top:100% looks a bit odd, but maybe it's ok.

英文:

I think the main problem with your css is:

  1. .header .navbar .active {
  2.   left: 0;
  3. }

Since there is a space between .active it will look for an element inside the navbar div with the class active, but there isn't one.

So instead this should be

  1. .header .navbar.active {
  2.   left: 0;
  3. }

Other minor things:
id=&quot;menu-btn&quot; had some backticks around it in your example which should be removed.

You haven't included the header class in your example, but I think that should be ok as long as it's in an element wrapping everything.

top:100% looks a bit odd, but maybe it's ok.

huangapple
  • 本文由 发表于 2023年4月6日 19:57:58
  • 转载请务必保留本文链接：https://go.coder-hub.com/75949261.html
  • css
  • html
  • javascript
  • navbar
  • responsive-design
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定