html - Navigation bar with button that controls whether it's hidden or displayed -

was wondering if redirect me site/tutorial horizontal navigation bar @ top of page, button hides/displays it. think semicircle attached bottom of bar, down/up arrow according whether bar hidden or displayed.

i've been looking on internet, , cannot find site has this, or tutorial teaches how implement onto site.

i could've sworn i've seen before, not sure where.

thanks

i don't know tutorials this, have written small snippet using html & css (no js). i've used checkbox toggle navigation bar. navigation .bar toggled using :checked pseudo element , + selector. there comments in css, i'm not sure if clear, please comment, if there unclear.

/* general styling */    * {    box-sizing: border-box;    padding: 0;    margin: 0;    font-family: sans-serif;  }  .bar {    width: 100%;    height: 80px;    background: #eee;    border-bottom: 1px solid #555;    /* smooth animation (transition) */    transition: margin 0.4s;  }  .bar ul li {    list-style-type: none;    float: left;    padding: 30px 20px;  }  .bar ul li {    text-decoration: none;    color: #333;  }  /* toggle positioned absolute after bar */    .toggle {    position: absolute;    /* animation */    transition: top 0.4s;    /* doesn't checkbox */    -webkit-appearance: none;    appearance: none;    /* styling */    width: 50px;    height: 20px;    background-color: #eee;    border: 1px solid #aaa;    border-top: none;    border-bottom-left-radius: 10px;    border-bottom-right-radius: 10px;    /* position */    left: 50%;    margin-left: -25px;    /* misc */    outline: none;    cursor: pointer  }  /* set arrow :after pseudo element */    .toggle:after {    display: block;    position: absolute;    /* use other icon here */    content: "▼";    left: 50%;    margin-left: -6px;    top: 2px;    color: #666;  }  /* change content when checked */    .toggle:checked:after {    content: "▲";  }  /* magic part */    /* move toggle down when toggled */    .toggle:checked {    top: 80px;  }  .toggle:not(:checked) {    top: 0px;  }  /* next element + selector (the .bar) , move down */    .toggle:checked + .bar {    margin-top: 0px;  }  .toggle:not(:checked) + .bar {    margin-top: -80px;  }

<div class="navigation">      <!-- toggle -->    <input type="checkbox" class="toggle" />      <!-- navigation bar -->    <div class="bar">      <ul>        <li><a href="#">page #1</a>        </li>        <li><a href="#">page #2</a>        </li>        <li><a href="#">page #3</a>        </li>        <li><a href="#">page #4</a>        </li>      </ul>    </div>      </div>