SmashPortal SmashPortal - 23 days ago 13
CSS Question

Collapseable Text Menu

I'm making a website for my web dev class, and I had an idea to make the nav with single letters representing the menu items, but when you hover over the letter, they expand into full word(s).

Example:
If a menu item is shown as "[A]", when you hover over the letter, it expands into "[About]".

Is this something that can be done in HTML5/CSS, or do I need JavaScript, jQuery, etc?

Answer

You can achieve this effect with CSS. This code probably can be even optimized a lot but it's just to give you a rough idea of how your desired effect could look like.

HTML

<nav>
  <a href="">About</a>
  <a href="">Test</a>
  <a href="">About</a>
  <a href="">Test</a>
</nav>

CSS

body {
  margin: 0;
}

nav {
  height: 80px;
  align-items: center;
  background: #eee;
  display: flex;
  justify-content: space-around;
}

a {
  color: rgba(0, 0, 0, 0.8);
  font-size: 0;
  transition: 0.3s;
  text-decoration: none;
}

a:first-letter {
  font-size: initial;
}

a:hover {
  font-size: initial;
}

body {
  margin: 0;
}
nav {
  height: 80px;
  align-items: center;
  background: #eee;
  display: flex;
  justify-content: space-around;
}
a {
  color: rgba(0, 0, 0, 0.8);
  font-size: 0;
  transition: 0.3s;
  text-decoration: none;
}
a:first-letter {
  font-size: initial;
}
a:hover {
  font-size: initial;
}
<nav>
  <a href="">About</a>
  <a href="">Test</a>
  <a href="">About</a>
  <a href="">Test</a>
</nav>

Comments