1

I'm trying to make a navigation bar with pure HTML and CSS which doesn't require any JavaScript to open and close.

I'm having an issue with the navigation bar remaining open. When I set display: none or visibility: hidden to get desired functionality, the hyperlink doesn't function anymore.

http://codepen.io/anon/pen/dOMYEj

Is this possible? Thanks!

Faraz
  • 643
  • 4
  • 15

2 Answers2

1

when you use display:flex ,position:absolute ,relative and fixed does not behave as expected.check this link

Modified markup and css a bit .please check the following snippet

* {
  font-family: sans-serif;
}
nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: white;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}
nav div {
  height: 5vh;
  width: 10vw;
  position: fixed;
  top: 0;
  padding: 3px;
  right: 0;
}
.icon {
  display: inline;
}
nav > h1 {
  font-family: cursive;
  font-size: 1.2rem;
  padding-left: 10px;
  color: blue;
}
nav li {
  list-style: none;
  display: inline;
  font-size: 1.2rem;
  padding: 10px;
  cursor: pointer;
}
nav a {
  color: darkgray;
  text-decoration: none;
}
nav a:hover {
  color: black;
}
nav a:active {
  color: blue;
}
nav li:first-child * {
  color: blue;
}
nav ul {
  width: 50vw;
}
nav h1,
nav ul {
  font-size: 2rem;
}
nav > input {
  display: none;
}
nav > label {
  display: none;
}
input {
  display: none;
}
section {
  font-size: 2rem;
  padding: 1vh 5vh 0 5vh;
}
section#top {
  margin-top: 5.5vh;
}
@media (max-width: 5000px) {
  /* changed to 5000 so it is always collapsed */
  nav {
    height: 6vh;
    text-align: center;
    justify-content: space-between;
  }
  nav li {
    display: block;
    border: solid 1px blue;
    margin: 0 auto;
  }
  #links {
    visibility: hidden;
  }
  section#top {
    margin-top: 10vh;
  }
  input:checked + nav ul#links {
    visibility: visible;
    position: absolute;
    right: 30px;
  }
  input:not:checked +nav ul#links {
    visibility: hidden;
  }
  nav {
    color: blue;
  }
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="taco.css">
  <title>Test Page</title>
</head>
<input type='checkbox' id='one'>

<nav class="toggleable" tabindex="1">
  <h1>Test Page</h1>
  <div>
    <label for="one">☰</label>
    <ul id="links">
      <li><a href="#top">Home</a>
      </li>
      <li><a href="#about">About</a>
      </li>
      <li><a href="#menu">Menu</a>
      </li>
      <li><a href="#hours">Hours</a>
      </li>
      <li><a href="#directions">Directions</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<main>
  <section id="top">
    <h1>Welcome</h1> awefore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia
    reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam
    voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="about">
    <h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="menu">
    <h1>Menu</h1> Lorem ipsum dolor styktyktyktyking elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="hours">
    <h1>Hours</h1> Lorem ipsum dolor sit rtyr657456ydfghfvgyjktyuicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="directions">
    <h1>Directions</h1> Lorem ipsuaw4yae4yah34rtaw3789t. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="contact">
    <h1>Contact</h1> Lorem ipsum dolor 3456345789ru8ghiuretur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
</main>

</html>

Hope it helps

Community
  • 1
  • 1
Geeky
  • 7,420
  • 2
  • 24
  • 50
  • Thanks for sharing! Is there any way to do this with display/visibility rather than opacity? Because with opacity the menu is still there and clickable. Also, is it possible to programmatically make it smoother so that the second time it's clicked, it doesn't show and then go away but toggle properly? – Faraz Nov 17 '16 at 12:22
  • Modified the code...I have not used any opacity,done just with visibility:hidden,just check is this what you want – Geeky Nov 17 '16 at 14:33
  • Geeky, if you notice - now clicking on a particular menu item doesn't close the menu as I'd like. Goes back to the same issue that was happening originally. Is there any way to make it so it closes when clicked? – Faraz Nov 17 '16 at 15:47
  • @Faraz..I dont think we can do it using pure css,we might need to be add javascript a bit... If you are looking for only css solution ,please feel free to open the question again ,unaccept my answer atleast we can get to see what others give the solution to this...this could be of helpful to you http://stackoverflow.com/questions/18786546/creating-drop-down-menu-on-click-css – Geeky Nov 17 '16 at 19:07
  • @Faraz...There is no pure css solution for it...check these links and first links accepted answers comment section http://stackoverflow.com/questions/40670238/how-to-hide-a-parent-element-on-click-of-a-child-element/40670544?noredirect=1#comment68573540_40670544 http://stackoverflow.com/questions/15356717/changing-the-href-of-an-html-tag-with-css... – Geeky Nov 18 '16 at 16:06
1

I was able to finally create it. I really hope this helps someone out.

HTML:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="taco.css">
    <title>Test Page</title>
</head>

<nav>
    <header><h1>Test Site</h1></header>
    <div id="navigation">
        <button>☰</button>
        <ul id="links">
            <li><a href="#top">Home</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#menu">Menu</a>
            </li>
            <li><a href="#hours">Hours</a>
            </li>
            <li><a href="#directions">Directions</a>
            </li>
            <li><a href="#contact">Contact</a>
            </li>
        </ul>
    </div>
</nav>

<main>
    <section id="top">
        <h1>Welcome</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt consectetur suscipit in, vitae voluptas, dolorum consequatur sequi animi deserunt maxime quae sint dolorem dolores aliquid totam qui architecto ab beatae.
        reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam
        voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
    </section>
    <section id="about">
        <h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
    </section>
    <section id="menu">
        <h1>Menu</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum magnam quo quia quod eius aliquam adipisci molestias vel, sapiente ex nobis, eligendi a inventore nihil sit aut molestiae voluptatibus culpa.
    </section>
    <section id="hours">
        <h1>Hours</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam iste consequatur impedit, voluptatum saepe vero harum quod, repudiandae maxime dolorum non. Adipisci, tempore, quisquam! Est dolorem obcaecati distinctio explicabo veritatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta deserunt adipisci, debitis dolor ex consectetur iusto repellat molestias velit suscipit laudantium enim quae autem eveniet repudiandae sit. Facilis, quis, at.
        dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
    </section>
    <section id="directions">
        <h1>Directions</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, ipsam, optio reiciendis sit quidem beatae consequatur alias nulla labore! Vel quibusdam neque consequatur est tempora quas omnis placeat ab ex.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, sit amet dolores. Nobis corrupti nihil, officiis maiores eligendi modi quo, minus? Expedita, corrupti ullam nobis cum, quibusdam ipsa quo ex!
        adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
    </section>
    <section id="contact">
        <h1>Contact</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati minus ducimus fuga qui dignissimos reiciendis voluptatibus ea iusto dolorem doloribus eius similique impedit, molestiae consequuntur non ratione enim, ullam laboriosam. Lorem ipsum
        dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
    </section>
</main>

</html>

CSS:

* {
    font-family: sans-serif;
}
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    background-color: white;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}
nav div#navigation {
    height: 5vh;
    width: 10vw;
    position: fixed;
    top: 1vh;
    padding: 1vw;
    right: 25vw;
}
.icon {
    display: inline;
}
nav header {
    top: 1vw;
    left: 1vw;
    position: fixed;
}
nav header > h1 {
    background-color: rgba(255, 255, 255, .5);
    font-family: cursive;
    font-size: 2rem;
    padding-left: 1vw;
    color: blue;
    left: 0;
}
nav li {
    list-style: none;
    display: inline;
    font-size: 1.2rem;
    padding: 1vh;
    cursor: pointer;
}
nav li:focus {
    color: blue;
}
nav a {
    color: darkgray;
    text-decoration: none;
}
nav a:hover {
    color: black;
}
nav a:active {
    color: blue;
}
nav li:first-child * {
    color: blue;
}
nav ul {
    width: 50vw;
}
nav h1,
nav ul {
    font-size: 2rem;
}
nav #links {
    background-color: rgba(255, 255, 255, .9);
}
button {
    display: none;
}
input {
    display: none;
}
section {
    font-size: 2rem;
    padding: 1vh 5vh 0 5vh;
}
section#top {
    margin-top: 5.5vh;
}
section > h1 {
    margin-top: 8vh;
    color: blue;
}

/* Changed to 9999px so it's always collapsed */
@media (max-width: 9999px) {
    button {
        font-size: 1.75rem;
        border: 0;
        background: white;
        cursor: pointer;
        display:block;
    }
    button:focus {
        outline: 0;
    }
    nav div#navigation {
        right: 0;
    }
    nav li {
        display: block;
        border: solid 1px blue;
        margin: 0 auto;
    }
    #links {
        display: none;
        background-color: white;
    }
    button:focus + #links,
    #links:hover {
        display: block;
        position: absolute;
        right: 5vw;
    }
    nav {
        color: blue;
    }
    section > h1 {
        margin-top: 6.25vh;
        color: blue;
    }
    nav header > h1 {
        margin: 0;
        padding: 0;
        font-size: 2rem;
    }
}

Demo

Faraz
  • 643
  • 4
  • 15
  • Good work faraz..just a question even in your solution when you click on any of the menu items like about/hours/directions target section related to menu item can be seen but the nav bar is not getting closed ,were not you looking for that or were you just looking when the focus is out of the nav bar it should get closed? – Geeky Nov 24 '16 at 04:18
  • Thanks Geeky! I restructured it so that when you hover away, it closes. That is the actual functionality I was looking for. – Faraz Nov 24 '16 at 04:20
  • oh ok...i was under a different assumption...anyways good work! – Geeky Nov 24 '16 at 04:25