Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Plans for dropdowns? #17

Closed
DennisSuitters opened this issue Mar 31, 2020 · 7 comments
Closed

Plans for dropdowns? #17

DennisSuitters opened this issue Mar 31, 2020 · 7 comments

Comments

@DennisSuitters
Copy link

Hi @andybrewer, I was curios if you had plans to add dropdowns to the nav menu?

@DennisSuitters
Copy link
Author

Oh, also, I've used mvp here, works great, nice and clean, and clean markup.
https://diemendesign.github.io/AussieOwned/

@DennisSuitters
Copy link
Author

DennisSuitters commented Mar 31, 2020

Had a little bit of a play around:
Styling:

/* Nav */
nav {
    align-items: center;
    display: flex;
    font-weight: bold;
    justify-content: space-between;
    margin-bottom: 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    position: relative;     <---- added
    display: inline-block;
    margin: 0 0.5rem;
}
/* Dropdown */
  nav ul li:hover ul li {
    display: block;
  }

  nav ul li ul li {
    position: absolute;
    top: 1.2em;
    left: -.75em;
    display: none;
    height: auto;
    background: #fff;
    border: 1px solid var(--color-bg-secondary);
    padding: .5em 2em;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow) var(--color-shadow);
  }

Markup:

<nav>
  <ul>
    <li><a class="active" href="link.html">Link</a></li>
    <li><a href="link.html">Link</a>
      <ul>
        <li><a href="link.html">Dropdown</a></li>
      </ul>
    </li>
  </ul>
</nav>

@andybrewer
Copy link
Owner

Good question. The primary goal of MVP.css is a a no-class stylesheet for simple sites. If they can be done simply and without classes I'd be open to including them.

@DennisSuitters
Copy link
Author

The code above, doesn't use classes to achieve a simple nav dropdown, the "active" class above in the HTML is just a remnant of me playing and isn't used, it doesn't exist in the styles above it.
If your happy with it I'll gladly do a PR.

@andybrewer
Copy link
Owner

Awesome! Would you mind including a screenshot in the PR?

@DennisSuitters
Copy link
Author

PR with Screenshot added, thanks for such a cool project. I am considering adding a theme to my project AuroraCMS as a minimilst theme, and adding some extra classes but concentrating on keep as much without classes as you have done.

@andybrewer
Copy link
Owner

Added to v1.3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants