CSS导航栏，我哪里搞错了？

问题描述 投票：0回答：2

我正在使用 HTML、CSS 和 JavaScript 开发导航栏。

我已经对其进行了编码，并将栏的显示设置为

fixed
，然后我注意到页面的内容现在覆盖了
nav bar
。附上代码截图以及代码

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">



  <title>AlmaTech</title>



  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <link rel="stylesheet" href="all.min.css">

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Cute+Font&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Signika+Negative&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Cute+Font&display=swap');
    * {
      font-family: 'Signika Negative', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      border-radius: 5px;
    }
    
    .brand {
      font-family: 'Caveat', cursive;
      font-family: 'Cute Font', sans-serif;
    }
    
    .nav-bar-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      padding: 10px 40px;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      background: #e7e7e7aa;
      position: fixed;
    }
    
    .nav-bar-middle {
      display: flex;
      gap: 30px;
    }
    
    .nav-bar-middle li {
      list-style: none;
      font-size: 20px;
    }
    
    .nav-bar-middle-items {
      display: flex;
      gap: 30px;
    }
    
    .content {
      position: absolute;
    }
    
    .nav-bar-side {
      position: sticky;
      transition: all 0.5s ease-in-out;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
      display: none;
      /* border-top-radius:0;

       border-right-radius:0;

       border-left-radius:0;

       border-bottom-radius:0; */
      /* border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;*/
      border-radius: 0 0 10px 0;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      flex-direction: column;
      margin-top: 0;
    }
    
    .nav-bar-side ul li {
      padding-top: 20px;
    }
    
    .nav-bar-side ul li {
      list-style: none;
    }
    
    #menuIcon {
      display: none;
    }
    
    .show {
      display: block;
      position: sticky;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
    }
    
    .rotate {
      transform: rotate(-90deg)
    }
    
    @media(max-width:900px) {
      #menuIcon {
        display: none;
      }
      #accountIcon {
        display: none;
      }
    }
    
    @media(max-width:800px) {
      #menuIcon {
        display: block;
      }
      .nav-bar-middle {
        display: none;
      }
    }
  </style>

</head>

<body>



  <div class="body">

    <div class="nav-bar-container">

      <div class="nav-bar-logo">

        <h1 class="brand">AlmaTech</h1>

      </div>



      <div class="nav-bar-middle">

        <ul class="nav-bar-middle-items">

          <li>Home</li>

          <li>About Us</li>

          <li>Contact Us</li>

          <li>Our Services</li>

          <li>Achievements</li>

        </ul>

      </div>



      <div class="nav-bar-right">

        <i class="fa-solid fa-bars" id="menuIcon"></i>

        <i class="fa-solid fa-user" id="accountIcon"></i>

      </div>

    </div>





    <div class="nav-bar-side">

      <ul class="nav-bar-side-items">

        <li>Home</li>

        <li>About Us</li>

        <li>Contact Us</li>

        <li>Our Services</li>

        <li>Achievements</li>

      </ul>

    </div>

  </div>



  <div class="content">

    brute noster aliquam adversarium utamur arcu voluptatum nobis antiopam pretium te putent dicat deterruisset voluptatibus sententiae definiebas iriure platonem tellus ancillae laudem orci nisl nonumes sanctus ad adipiscing tractatos dolore voluptatum tristique
    porro neque tale rutrum efficiantur definiebas luptatum equidem habemus nostrum hinc antiopam eleifend amet nullam torquent utroque petentium antiopam sociis curabitur interdum error ludus adipiscing prompta electram natum equidem tibique molestiae
    meliore vivamus adipiscing ligula arcu habemus nunc epicuri nulla constituam nascetur ea integer invenire cum sanctus fabulas option dictas nisl dissentiunt consectetur accusata et utinam ceteros similique dicam dico faucibus sapientem ceteros porro
    fabulas graece nibh mi donec montes possim eripuit arcu inceptos omittam feugait vix cum suspendisse lectus himenaeos morbi pro sodales per adipisci interpretaris inciderint iisque habitant mucius leo habitant senectus petentium omnesque mus dictas
    persius magna porta dicam condimentum consectetuer mucius vel epicurei detraxit ocurreret expetenda usu porttitor id hac magnis eloquentiam oratio neglegentur fermentum platea affert repudiandae patrioque mauris sapien ocurreret senectus iuvaret mediocritatem
    intellegat tempus aliquam quam fringilla deterruisset intellegebat fabulas hinc efficitur parturient animal menandri simul sententiae solum orci dolores hinc verear eirmod electram causae ancillae mediocritatem orci vivendo utroque voluptatum platonem
    elaboraret quod iudicabit volutpat sententiae ornatus suspendisse eloquentiam felis vituperatoribus vulputate sanctus mi legimus vitae interpretaris imperdiet dui decore maecenas interpretaris iriure viderer expetendis honestatis venenatis senectus
    reque dictum consetetur pertinacia doctus in eruditi falli graecis contentiones option nostra no persequeris indoctum consetetur appetere quas eget accumsan nisi sanctus fugit vituperata fabellas pericula maximus pellentesque intellegebat tincidunt
    libero mus ancillae his assueverit ludus conclusionemque eum vero melius commodo adversarium error volumus molestiae detraxit viderer tibique suavitate montes rutrum prodesset nostra wisi consectetuer sociosqu vivendo iisque ex utamur quisque feugiat
    definiebas suscipiantur volumus est cetero nulla tractatos dissentiunt montes deserunt graece detracto minim legere quaestio ancillae fabellas efficitur ex venenatis ligula altera maluisset laoreet discere adversarium agam lacus dolorem ornare pro
    platonem quaeque cubilia nisi varius fabulas vidisse pharetra cetero sit doming usu aliquid ullamcorper aliquet dapibus mucius nam sodales mei habitasse dis decore audire malesuada quis ultricies senectus ligula non no intellegebat dicunt dis vidisse
    interdum molestie orci mediocrem vehicula qui idque dolor veniam unum leo penatibus eum ac ceteros montes accumsan netus augue tantas voluptaria eum faucibus simul faucibus referrentur dis suas efficiantur aeque velit class voluptatibus est interdum
    netus dolore salutatus torquent constituam iisque blandit tibique curae cum repudiandae dolor eos appetere mei lacus sodales vis aeque consetetur liber fringilla cras faucibus causae dictumst vix mediocrem vidisse periculis eu scelerisque petentium
    nam eam neque sea facilisi no sem ius leo verterem cetero conceptam interesset definitionem conubia sem aliquip elementum noluisse veri mus aliquam dolore hendrerit malorum regione amet civibus enim fusce te vel porttitor liber tibique iisque omittam
    constituto ignota vivamus omittantur interesset dicit platonem praesent voluptatibus suscipiantur principes natum alterum porro singulis in quaestio velit doming placerat tempor imperdiet sumo netus lacus perpetua aenean doctus quem nam electram elementum
    quis consequat vivendo voluptaria singulis molestiae meliore fabulas erroribus quaeque libris conubia sumo legere veri lacinia oratio hac facilisi liber saperet feugait labores ubique neque pellentesque prompta corrumpit numquam civibus neque est
    facilisi ornare perpetua saepe honestatis possim vituperatoribus mnesarchum sadipscing cum eam dicant mediocrem persequeris ridiculus nulla fabellas vestibulum eius mi iusto veritus causae scripta aptent tempus nisi eruditi tractatos dolor platonem
    pericula audire doming sit qui egestas nascetur corrumpit pro malesuada ac ipsum an no integer veri singulis dis elitr natum placerat nascetur interesset efficitur noluisse sapientem his fabulas falli ponderum reque dapibus dictumst adolescens imperdiet
    fusce libris menandri suscipiantur proin senectus electram cu mi vivamus ultrices odio affert interdum non ancillae periculis possim varius sociis cubilia legimus latine consectetur ea moderatius ponderum an tellus nam magnis magnis ac in mutat consectetur
    habemus adipisci periculis nullam praesent platea epicurei neque quem blandit ac sollicitudin magnis aenean magnis definitiones eruditi legimus potenti vel senectus lacus sociosqu meliore ex himenaeos atomorum ancillae no senserit malesuada libero
    delicata congue luptatum pro nisl mnesarchum ceteros persius mnesarchum debet eu interpretaris vero atomorum salutatus duis elit ullamcorper agam fabulas deserunt commodo nihil mazim expetenda deseruisse in noster eruditi gravida dicam eleifend nonumes
    petentium nominavi luctus eirmod prompta offendit consul viris facilisi offendit platea dicunt perpetua voluptaria ad suscipit dico ceteros ferri litora solet scripserit dictas veniam nihil class cetero reprehendunt tortor interesset sapien viverra
    aeque gloriatur fusce idque porta volumus feugait comprehensam lorem esse petentium magnis fames iudicabit mei eius dicta nihil fabulas commune imperdiet repudiare suas inani inceptos maluisset latine dolores iudicabit unum phasellus velit nonumy
    brute habitasse moderatius commodo sonet erroribus verear conclusionemque verterem reque iisque placerat invenire ut vero oratio eruditi fugit libero adipisci meliore est justo vulputate solum non scelerisque elit turpis sodales pertinacia pretium
    habitasse arcu quaerendum civibus brute feugait ipsum dignissim tritani dissentiunt ignota tincidunt himenaeos porro instructior gloriatur consectetur salutatus per inciderint nisl dolorem alterum vivamus persecuti suspendisse eruditi sociosqu mi
    prompta efficiantur tamquam eruditi aliquet morbi molestiae omnesque ridiculus mea pertinacia turpis mi adolescens necessitatibus quis omittam aliquip nostra ex inani unum repudiandae placerat doctus eleifend maiorum nascetur utroque ultricies ignota
    verterem sed liber duis rhoncus cubilia mus audire percipit sodales maiestatis dictum magna persius splendide suas unum audire ponderum suscipit comprehensam donec scripta similique dolorum dolore adipiscing bibendum oratio nunc utinam nihil expetenda
    iriure aperiri id falli litora velit malesuada aliquet maiorum facilisi accommodare mazim praesent maximus ea eu vituperata duis nonumy sapientem donec gravida qualisque dolores sumo altera dui graeci

  </div>

  <script>
    const navIcon = document.querySelector('#menuIcon');



    const navSide = document.querySelector('.nav-bar-side');



    navIcon.addEventListener('click', toGGle);



    function toGGle() {

      navSide.classList.toggle('show');



      navIcon.classList.toggle('rotate');



    }
  </script>

</body>

</html>

我尝试了很多值，但没有看到有用的值

javascript html css navigationbar
2个回答
0
投票

您可以使用z-index。这里我设置为9999。

.nav-bar-container {
  /* ... */
  z-index: 9999;
}


<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">



  <title>AlmaTech</title>



  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <link rel="stylesheet" href="all.min.css">

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Cute+Font&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Signika+Negative&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Cute+Font&display=swap');
    * {
      font-family: 'Signika Negative', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      border-radius: 5px;
    }
    
    .brand {
      font-family: 'Caveat', cursive;
      font-family: 'Cute Font', sans-serif;
    }
    
    .nav-bar-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      padding: 10px 40px;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      background: #e7e7e7aa;
      position: fixed;
      z-index: 9999;
    }
    
    .nav-bar-middle {
      display: flex;
      gap: 30px;
    }
    
    .nav-bar-middle li {
      list-style: none;
      font-size: 20px;
    }
    
    .nav-bar-middle-items {
      display: flex;
      gap: 30px;
    }
    
    .content {
      position: absolute;
    }
    
    .nav-bar-side {
      position: sticky;
      transition: all 0.5s ease-in-out;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
      display: none;
      /* border-top-radius:0;

       border-right-radius:0;

       border-left-radius:0;

       border-bottom-radius:0; */
      /* border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;*/
      border-radius: 0 0 10px 0;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      flex-direction: column;
      margin-top: 0;
    }
    
    .nav-bar-side ul li {
      padding-top: 20px;
    }
    
    .nav-bar-side ul li {
      list-style: none;
    }
    
    #menuIcon {
      display: none;
    }
    
    .show {
      display: block;
      position: sticky;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
    }
    
    .rotate {
      transform: rotate(-90deg)
    }
    
    @media(max-width:900px) {
      #menuIcon {
        display: none;
      }
      #accountIcon {
        display: none;
      }
    }
    
    @media(max-width:800px) {
      #menuIcon {
        display: block;
      }
      .nav-bar-middle {
        display: none;
      }
    }
  </style>

</head>

<body>



  <div class="body">

    <div class="nav-bar-container">

      <div class="nav-bar-logo">

        <h1 class="brand">AlmaTech</h1>

      </div>



      <div class="nav-bar-middle">

        <ul class="nav-bar-middle-items">

          <li>Home</li>

          <li>About Us</li>

          <li>Contact Us</li>

          <li>Our Services</li>

          <li>Achievements</li>

        </ul>

      </div>



      <div class="nav-bar-right">

        <i class="fa-solid fa-bars" id="menuIcon"></i>

        <i class="fa-solid fa-user" id="accountIcon"></i>

      </div>

    </div>





    <div class="nav-bar-side">

      <ul class="nav-bar-side-items">

        <li>Home</li>

        <li>About Us</li>

        <li>Contact Us</li>

        <li>Our Services</li>

        <li>Achievements</li>

      </ul>

    </div>

  </div>



  <div class="content">

    brute noster aliquam adversarium utamur arcu voluptatum nobis antiopam pretium te putent dicat deterruisset voluptatibus sententiae definiebas iriure platonem tellus ancillae laudem orci nisl nonumes sanctus ad adipiscing tractatos dolore voluptatum tristique
    porro neque tale rutrum efficiantur definiebas luptatum equidem habemus nostrum hinc antiopam eleifend amet nullam torquent utroque petentium antiopam sociis curabitur interdum error ludus adipiscing prompta electram natum equidem tibique molestiae
    meliore vivamus adipiscing ligula arcu habemus nunc epicuri nulla constituam nascetur ea integer invenire cum sanctus fabulas option dictas nisl dissentiunt consectetur accusata et utinam ceteros similique dicam dico faucibus sapientem ceteros porro
    fabulas graece nibh mi donec montes possim eripuit arcu inceptos omittam feugait vix cum suspendisse lectus himenaeos morbi pro sodales per adipisci interpretaris inciderint iisque habitant mucius leo habitant senectus petentium omnesque mus dictas
    persius magna porta dicam condimentum consectetuer mucius vel epicurei detraxit ocurreret expetenda usu porttitor id hac magnis eloquentiam oratio neglegentur fermentum platea affert repudiandae patrioque mauris sapien ocurreret senectus iuvaret mediocritatem
    intellegat tempus aliquam quam fringilla deterruisset intellegebat fabulas hinc efficitur parturient animal menandri simul sententiae solum orci dolores hinc verear eirmod electram causae ancillae mediocritatem orci vivendo utroque voluptatum platonem
    elaboraret quod iudicabit volutpat sententiae ornatus suspendisse eloquentiam felis vituperatoribus vulputate sanctus mi legimus vitae interpretaris imperdiet dui decore maecenas interpretaris iriure viderer expetendis honestatis venenatis senectus
    reque dictum consetetur pertinacia doctus in eruditi falli graecis contentiones option nostra no persequeris indoctum consetetur appetere quas eget accumsan nisi sanctus fugit vituperata fabellas pericula maximus pellentesque intellegebat tincidunt
    libero mus ancillae his assueverit ludus conclusionemque eum vero melius commodo adversarium error volumus molestiae detraxit viderer tibique suavitate montes rutrum prodesset nostra wisi consectetuer sociosqu vivendo iisque ex utamur quisque feugiat
    definiebas suscipiantur volumus est cetero nulla tractatos dissentiunt montes deserunt graece detracto minim legere quaestio ancillae fabellas efficitur ex venenatis ligula altera maluisset laoreet discere adversarium agam lacus dolorem ornare pro
    platonem quaeque cubilia nisi varius fabulas vidisse pharetra cetero sit doming usu aliquid ullamcorper aliquet dapibus mucius nam sodales mei habitasse dis decore audire malesuada quis ultricies senectus ligula non no intellegebat dicunt dis vidisse
    interdum molestie orci mediocrem vehicula qui idque dolor veniam unum leo penatibus eum ac ceteros montes accumsan netus augue tantas voluptaria eum faucibus simul faucibus referrentur dis suas efficiantur aeque velit class voluptatibus est interdum
    netus dolore salutatus torquent constituam iisque blandit tibique curae cum repudiandae dolor eos appetere mei lacus sodales vis aeque consetetur liber fringilla cras faucibus causae dictumst vix mediocrem vidisse periculis eu scelerisque petentium
    nam eam neque sea facilisi no sem ius leo verterem cetero conceptam interesset definitionem conubia sem aliquip elementum noluisse veri mus aliquam dolore hendrerit malorum regione amet civibus enim fusce te vel porttitor liber tibique iisque omittam
    constituto ignota vivamus omittantur interesset dicit platonem praesent voluptatibus suscipiantur principes natum alterum porro singulis in quaestio velit doming placerat tempor imperdiet sumo netus lacus perpetua aenean doctus quem nam electram elementum
    quis consequat vivendo voluptaria singulis molestiae meliore fabulas erroribus quaeque libris conubia sumo legere veri lacinia oratio hac facilisi liber saperet feugait labores ubique neque pellentesque prompta corrumpit numquam civibus neque est
    facilisi ornare perpetua saepe honestatis possim vituperatoribus mnesarchum sadipscing cum eam dicant mediocrem persequeris ridiculus nulla fabellas vestibulum eius mi iusto veritus causae scripta aptent tempus nisi eruditi tractatos dolor platonem
    pericula audire doming sit qui egestas nascetur corrumpit pro malesuada ac ipsum an no integer veri singulis dis elitr natum placerat nascetur interesset efficitur noluisse sapientem his fabulas falli ponderum reque dapibus dictumst adolescens imperdiet
    fusce libris menandri suscipiantur proin senectus electram cu mi vivamus ultrices odio affert interdum non ancillae periculis possim varius sociis cubilia legimus latine consectetur ea moderatius ponderum an tellus nam magnis magnis ac in mutat consectetur
    habemus adipisci periculis nullam praesent platea epicurei neque quem blandit ac sollicitudin magnis aenean magnis definitiones eruditi legimus potenti vel senectus lacus sociosqu meliore ex himenaeos atomorum ancillae no senserit malesuada libero
    delicata congue luptatum pro nisl mnesarchum ceteros persius mnesarchum debet eu interpretaris vero atomorum salutatus duis elit ullamcorper agam fabulas deserunt commodo nihil mazim expetenda deseruisse in noster eruditi gravida dicam eleifend nonumes
    petentium nominavi luctus eirmod prompta offendit consul viris facilisi offendit platea dicunt perpetua voluptaria ad suscipit dico ceteros ferri litora solet scripserit dictas veniam nihil class cetero reprehendunt tortor interesset sapien viverra
    aeque gloriatur fusce idque porta volumus feugait comprehensam lorem esse petentium magnis fames iudicabit mei eius dicta nihil fabulas commune imperdiet repudiare suas inani inceptos maluisset latine dolores iudicabit unum phasellus velit nonumy
    brute habitasse moderatius commodo sonet erroribus verear conclusionemque verterem reque iisque placerat invenire ut vero oratio eruditi fugit libero adipisci meliore est justo vulputate solum non scelerisque elit turpis sodales pertinacia pretium
    habitasse arcu quaerendum civibus brute feugait ipsum dignissim tritani dissentiunt ignota tincidunt himenaeos porro instructior gloriatur consectetur salutatus per inciderint nisl dolorem alterum vivamus persecuti suspendisse eruditi sociosqu mi
    prompta efficiantur tamquam eruditi aliquet morbi molestiae omnesque ridiculus mea pertinacia turpis mi adolescens necessitatibus quis omittam aliquip nostra ex inani unum repudiandae placerat doctus eleifend maiorum nascetur utroque ultricies ignota
    verterem sed liber duis rhoncus cubilia mus audire percipit sodales maiestatis dictum magna persius splendide suas unum audire ponderum suscipit comprehensam donec scripta similique dolorum dolore adipiscing bibendum oratio nunc utinam nihil expetenda
    iriure aperiri id falli litora velit malesuada aliquet maiorum facilisi accommodare mazim praesent maximus ea eu vituperata duis nonumy sapientem donec gravida qualisque dolores sumo altera dui graeci

  </div>

  <script>
    const navIcon = document.querySelector('#menuIcon');



    const navSide = document.querySelector('.nav-bar-side');



    navIcon.addEventListener('click', toGGle);



    function toGGle() {

      navSide.classList.toggle('show');



      navIcon.classList.toggle('rotate');



    }
  </script>

</body>

</html>

0
投票

只需将 

z-index: 99
（或任何高于 
1
的数字）添加到 
.nav-bar-container
元素即可。

此外，如果您担心 

nav-bar-container
的不透明度，请删除 
aa
属性处的 
background
： 
#e7e7e7

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">



  <title>AlmaTech</title>



  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <link rel="stylesheet" href="all.min.css">

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Cute+Font&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Signika+Negative&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Cute+Font&display=swap');
    * {
      font-family: 'Signika Negative', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      border-radius: 5px;
    }
    
    .brand {
      font-family: 'Caveat', cursive;
      font-family: 'Cute Font', sans-serif;
    }
    
    .nav-bar-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      align-items: center;
      padding: 10px 40px;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      background: #e7e7e7aa;
      position: fixed;
      z-index: 99;
    }
    
    .nav-bar-middle {
      display: flex;
      gap: 30px;
    }
    
    .nav-bar-middle li {
      list-style: none;
      font-size: 20px;
    }
    
    .nav-bar-middle-items {
      display: flex;
      gap: 30px;
    }
    
    .content {
      position: absolute;
    }
    
    .nav-bar-side {
      position: sticky;
      transition: all 0.5s ease-in-out;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
      display: none;
      /* border-top-radius:0;

       border-right-radius:0;

       border-left-radius:0;

       border-bottom-radius:0; */
      /* border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;*/
      border-radius: 0 0 10px 0;
      box-shadow: 5px 3px 10px rgb(0 0 0 / 0.2);
      padding-right: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      flex-direction: column;
      margin-top: 0;
    }
    
    .nav-bar-side ul li {
      padding-top: 20px;
    }
    
    .nav-bar-side ul li {
      list-style: none;
    }
    
    #menuIcon {
      display: none;
    }
    
    .show {
      display: block;
      position: sticky;
      background: #e7e7e7ad;
      display: flex;
      align-items: space-between;
      justify-content: flex-start;
      width: 150px;
    }
    
    .rotate {
      transform: rotate(-90deg)
    }
    
    @media(max-width:900px) {
      #menuIcon {
        display: none;
      }
      #accountIcon {
        display: none;
      }
    }
    
    @media(max-width:800px) {
      #menuIcon {
        display: block;
      }
      .nav-bar-middle {
        display: none;
      }
    }
  </style>

</head>

<body>



  <div class="body">

    <div class="nav-bar-container">

      <div class="nav-bar-logo">

        <h1 class="brand">AlmaTech</h1>

      </div>



      <div class="nav-bar-middle">

        <ul class="nav-bar-middle-items">

          <li>Home</li>

          <li>About Us</li>

          <li>Contact Us</li>

          <li>Our Services</li>

          <li>Achievements</li>

        </ul>

      </div>



      <div class="nav-bar-right">

        <i class="fa-solid fa-bars" id="menuIcon"></i>

        <i class="fa-solid fa-user" id="accountIcon"></i>

      </div>

    </div>





    <div class="nav-bar-side">

      <ul class="nav-bar-side-items">

        <li>Home</li>

        <li>About Us</li>

        <li>Contact Us</li>

        <li>Our Services</li>

        <li>Achievements</li>

      </ul>

    </div>

  </div>



  <div class="content">

    brute noster aliquam adversarium utamur arcu voluptatum nobis antiopam pretium te putent dicat deterruisset voluptatibus sententiae definiebas iriure platonem tellus ancillae laudem orci nisl nonumes sanctus ad adipiscing tractatos dolore voluptatum tristique
    porro neque tale rutrum efficiantur definiebas luptatum equidem habemus nostrum hinc antiopam eleifend amet nullam torquent utroque petentium antiopam sociis curabitur interdum error ludus adipiscing prompta electram natum equidem tibique molestiae
    meliore vivamus adipiscing ligula arcu habemus nunc epicuri nulla constituam nascetur ea integer invenire cum sanctus fabulas option dictas nisl dissentiunt consectetur accusata et utinam ceteros similique dicam dico faucibus sapientem ceteros porro
    fabulas graece nibh mi donec montes possim eripuit arcu inceptos omittam feugait vix cum suspendisse lectus himenaeos morbi pro sodales per adipisci interpretaris inciderint iisque habitant mucius leo habitant senectus petentium omnesque mus dictas
    persius magna porta dicam condimentum consectetuer mucius vel epicurei detraxit ocurreret expetenda usu porttitor id hac magnis eloquentiam oratio neglegentur fermentum platea affert repudiandae patrioque mauris sapien ocurreret senectus iuvaret mediocritatem
    intellegat tempus aliquam quam fringilla deterruisset intellegebat fabulas hinc efficitur parturient animal menandri simul sententiae solum orci dolores hinc verear eirmod electram causae ancillae mediocritatem orci vivendo utroque voluptatum platonem
    elaboraret quod iudicabit volutpat sententiae ornatus suspendisse eloquentiam felis vituperatoribus vulputate sanctus mi legimus vitae interpretaris imperdiet dui decore maecenas interpretaris iriure viderer expetendis honestatis venenatis senectus
    reque dictum consetetur pertinacia doctus in eruditi falli graecis contentiones option nostra no persequeris indoctum consetetur appetere quas eget accumsan nisi sanctus fugit vituperata fabellas pericula maximus pellentesque intellegebat tincidunt
    libero mus ancillae his assueverit ludus conclusionemque eum vero melius commodo adversarium error volumus molestiae detraxit viderer tibique suavitate montes rutrum prodesset nostra wisi consectetuer sociosqu vivendo iisque ex utamur quisque feugiat
    definiebas suscipiantur volumus est cetero nulla tractatos dissentiunt montes deserunt graece detracto minim legere quaestio ancillae fabellas efficitur ex venenatis ligula altera maluisset laoreet discere adversarium agam lacus dolorem ornare pro
    platonem quaeque cubilia nisi varius fabulas vidisse pharetra cetero sit doming usu aliquid ullamcorper aliquet dapibus mucius nam sodales mei habitasse dis decore audire malesuada quis ultricies senectus ligula non no intellegebat dicunt dis vidisse
    interdum molestie orci mediocrem vehicula qui idque dolor veniam unum leo penatibus eum ac ceteros montes accumsan netus augue tantas voluptaria eum faucibus simul faucibus referrentur dis suas efficiantur aeque velit class voluptatibus est interdum
    netus dolore salutatus torquent constituam iisque blandit tibique curae cum repudiandae dolor eos appetere mei lacus sodales vis aeque consetetur liber fringilla cras faucibus causae dictumst vix mediocrem vidisse periculis eu scelerisque petentium
    nam eam neque sea facilisi no sem ius leo verterem cetero conceptam interesset definitionem conubia sem aliquip elementum noluisse veri mus aliquam dolore hendrerit malorum regione amet civibus enim fusce te vel porttitor liber tibique iisque omittam
    constituto ignota vivamus omittantur interesset dicit platonem praesent voluptatibus suscipiantur principes natum alterum porro singulis in quaestio velit doming placerat tempor imperdiet sumo netus lacus perpetua aenean doctus quem nam electram elementum
    quis consequat vivendo voluptaria singulis molestiae meliore fabulas erroribus quaeque libris conubia sumo legere veri lacinia oratio hac facilisi liber saperet feugait labores ubique neque pellentesque prompta corrumpit numquam civibus neque est
    facilisi ornare perpetua saepe honestatis possim vituperatoribus mnesarchum sadipscing cum eam dicant mediocrem persequeris ridiculus nulla fabellas vestibulum eius mi iusto veritus causae scripta aptent tempus nisi eruditi tractatos dolor platonem
    pericula audire doming sit qui egestas nascetur corrumpit pro malesuada ac ipsum an no integer veri singulis dis elitr natum placerat nascetur interesset efficitur noluisse sapientem his fabulas falli ponderum reque dapibus dictumst adolescens imperdiet
    fusce libris menandri suscipiantur proin senectus electram cu mi vivamus ultrices odio affert interdum non ancillae periculis possim varius sociis cubilia legimus latine consectetur ea moderatius ponderum an tellus nam magnis magnis ac in mutat consectetur
    habemus adipisci periculis nullam praesent platea epicurei neque quem blandit ac sollicitudin magnis aenean magnis definitiones eruditi legimus potenti vel senectus lacus sociosqu meliore ex himenaeos atomorum ancillae no senserit malesuada libero
    delicata congue luptatum pro nisl mnesarchum ceteros persius mnesarchum debet eu interpretaris vero atomorum salutatus duis elit ullamcorper agam fabulas deserunt commodo nihil mazim expetenda deseruisse in noster eruditi gravida dicam eleifend nonumes
    petentium nominavi luctus eirmod prompta offendit consul viris facilisi offendit platea dicunt perpetua voluptaria ad suscipit dico ceteros ferri litora solet scripserit dictas veniam nihil class cetero reprehendunt tortor interesset sapien viverra
    aeque gloriatur fusce idque porta volumus feugait comprehensam lorem esse petentium magnis fames iudicabit mei eius dicta nihil fabulas commune imperdiet repudiare suas inani inceptos maluisset latine dolores iudicabit unum phasellus velit nonumy
    brute habitasse moderatius commodo sonet erroribus verear conclusionemque verterem reque iisque placerat invenire ut vero oratio eruditi fugit libero adipisci meliore est justo vulputate solum non scelerisque elit turpis sodales pertinacia pretium
    habitasse arcu quaerendum civibus brute feugait ipsum dignissim tritani dissentiunt ignota tincidunt himenaeos porro instructior gloriatur consectetur salutatus per inciderint nisl dolorem alterum vivamus persecuti suspendisse eruditi sociosqu mi
    prompta efficiantur tamquam eruditi aliquet morbi molestiae omnesque ridiculus mea pertinacia turpis mi adolescens necessitatibus quis omittam aliquip nostra ex inani unum repudiandae placerat doctus eleifend maiorum nascetur utroque ultricies ignota
    verterem sed liber duis rhoncus cubilia mus audire percipit sodales maiestatis dictum magna persius splendide suas unum audire ponderum suscipit comprehensam donec scripta similique dolorum dolore adipiscing bibendum oratio nunc utinam nihil expetenda
    iriure aperiri id falli litora velit malesuada aliquet maiorum facilisi accommodare mazim praesent maximus ea eu vituperata duis nonumy sapientem donec gravida qualisque dolores sumo altera dui graeci

  </div>

  <script>
    const navIcon = document.querySelector('#menuIcon');



    const navSide = document.querySelector('.nav-bar-side');



    navIcon.addEventListener('click', toGGle);



    function toGGle() {

      navSide.classList.toggle('show');



      navIcon.classList.toggle('rotate');



    }
  </script>

</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.