html 超级简单的flexbox响应导航

Posted 2021-05-10

Super simple flexbox responsive nav
-----------------------------------


A [Pen](https://codepen.io/abalter/pen/NYLYYO) by [Ariel Balter](https://codepen.io/abalter) on [CodePen](https://codepen.io).

[License](https://codepen.io/abalter/pen/NYLYYO/license).

body {
  font-family: Arial, Helvetica, sans-serif;
}
#nav {
}
.nav-items {
  width: 100%;
  display: block;
}
.nav-items a {
  text-align: center;
  display: inline-block;
}
.nav-items a:hover {
  color: red;
}
#menu-toggle {
  display: none;
  margin: 0 auto;
}
@media screen and (max-width: 600px) {
  #nav {
    text-align: center;
  }
  .nav-items {
    display: none;
    margin: 1rem auto;
  }
  .nav-items a {
    display: block;
  }
  #menu-toggle {
    display: block;
  }
}

@media screen and (min-width: 601px) {
  .nav-items {
    display: inline-block;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

$('#menu-toggle').on('click', (e) =>
{
  console.log("menu-toggle");
  toggleCSS('.nav-items', 'display', 'block', 'none');
});

$('.nav-items a').on('click', (e) =>
{
  toggleCSS('.nav-items', 'display', 'block', 'none');
});

function toggleCSS(element, attribute, state1, state2)
{
  console.log(`element: ${element} attribute: ${attribute} state1: {state1} state2: ${state2}`);
  console.log($(element).css(attribute));

  $(element).css(attribute) == state1 ? $(element).css(attribute, state2) : $(element).css(attribute, state1);
  
  return $(element);
}

$(window).resize(() => {location = location; console.log($('.nav-items').css('display'))});

<div id="nav">
  <div id="menu-toggle"><button id="hamburger">MENU</button></div>
  <div class="nav-items">
    <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>