<![CDATA[MyRPG - Code Bits]]> https://mybb-rpg.com/ Tue, 23 Jun 2026 19:51:32 +0000 MyBB <![CDATA[[FREE] Quick List Style Navigation Bar w/ Sub Links - NON Responsive]]> https://mybb-rpg.com/showthread.php?tid=568 Wed, 22 Apr 2026 12:40:31 -0500 latrodectus]]> https://mybb-rpg.com/showthread.php?tid=568 [Image: Code-Bits-FREE-Quick-List-Style-Navigati...onsive.gif]
CSS
Code:
/**
  Code provided by Latrodectus (aka Widow/c.widow) FREE of any charges.
  Build upon, modify, use in your custom mybb themes, use for your own services, etc. I literally do not care. Have fun, enjoy it, learn from it.
**/

/** START: IGNORE THIS (i use this to get rid of box sizing issues and to do basic formats on fiddles) **/
*, *:before, *:after { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 15px; }
.content-wrapper { max-width: 1350px; margin: 0 auto; }
/** END: IGNORE THIS **/

/** START: VARIABLES (you can like not use these if you wish not to, just replace the variable in the css areas below with direct colors) **/
:root {
  --main-menu-bg-color: rgb(21, 21, 21);
  --main-menu-txt-color: rgb(214, 214, 214);
  --main-menu-lnk-color: rgb(236, 236, 236);
  --main-menu-lnk-hov-color: rgb(255, 255, 255);
  --main-menu-child-bg-color: rgb(34, 34, 34);
  --main-menu-child-txt-color: rgb(206, 206, 206);
  --main-menu-child-lnk-color: rgb(214, 214, 214);
  --main-menu-child-lnk-hov-color: rgb(239, 239, 239);
}
/** END: VARIABLES **/

.main-menu {
  background: var(--main-menu-bg-color);
  color: var(--main-menu-txt-color);
}
.main-menu a {
  color: var(--main-menu-lnk-color);
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}
.main-menu a:hover {
  color: var(--main-menu-lnk-hov-color);
}

ul#ul-navigation,
ul#ul-navigation ul {
  width: 100%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}
ul#ul-navigation {
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
}
ul#ul-navigation ul {
  flex-direction: column;
  gap: 0;
}

ul#ul-navigation > li {
  position: relative;
  flex: 1 1;
  min-width: 150px;
}

ul#ul-navigation li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
}
ul#ul-navigation > li.has-child > a::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.3s ease-in-out;
}
ul#ul-navigation > li.has-child:hover > a::after {
  transform: rotate(180deg);
}

ul#ul-navigation ul#ul-navigation-child {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  width: 100%;
  padding: 0;
  transition: all 0.3s ease-in-out;
  background: var(--main-menu-child-bg-color);
  color: var(--main-menu-child-txt-color);
  top: 100%;
  left: 0;
}
ul#ul-navigation ul#ul-navigation-child a {
  color: var(--main-menu-child-lnk-color);
}
ul#ul-navigation ul#ul-navigation-child a:hover {
  color: var(--main-menu-child-lnk-hov-color);
}

ul#ul-navigation li.has-child:hover > ul#ul-navigation-child {
  visibility: visible;
  opacity: 1;
}

HTML
Code:
<div class="main-menu">
  <div class="content-wrapper">
    <ul id="ul-navigation">
      <li><a href="/index.php">Home</a></li>
      <li class="has-child">
        <a href="/handbook.php">Handbook</a>
        <ul id="ul-navigation-child">
          <li><a href="/handbook.php?page=rules">Rules</a></li>
          <li><a href="/handbook.php?page=character-creation">Character Creation</a></li>
          <li><a href="/handbook.php?page=staff">Staff</a></li>
        </ul>
      </li>
      <li><a href="/memberlist.php">Accounts</a></li>
      <li><a href="/search.php">Search</a></li>
      <li class="has-child">
        <a href="">Link</a>
        <ul id="ul-navigation-child">
          <li><a href="">Link</a></li>
          <li><a href="">Link</a></li>
          <li><a href="">Link</a></li>
        </ul>
      </li>
      <li class="has-child">
        <a href="">Link</a>
        <ul id="ul-navigation-child">
          <li><a href="">Link</a></li>
          <li><a href="">Link</a></li>
          <li><a href="">Link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
]]> [Image: Code-Bits-FREE-Quick-List-Style-Navigati...onsive.gif]
CSS
Code:
/**
  Code provided by Latrodectus (aka Widow/c.widow) FREE of any charges.
  Build upon, modify, use in your custom mybb themes, use for your own services, etc. I literally do not care. Have fun, enjoy it, learn from it.
**/

/** START: IGNORE THIS (i use this to get rid of box sizing issues and to do basic formats on fiddles) **/
*, *:before, *:after { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-size: 15px; }
.content-wrapper { max-width: 1350px; margin: 0 auto; }
/** END: IGNORE THIS **/

/** START: VARIABLES (you can like not use these if you wish not to, just replace the variable in the css areas below with direct colors) **/
:root {
  --main-menu-bg-color: rgb(21, 21, 21);
  --main-menu-txt-color: rgb(214, 214, 214);
  --main-menu-lnk-color: rgb(236, 236, 236);
  --main-menu-lnk-hov-color: rgb(255, 255, 255);
  --main-menu-child-bg-color: rgb(34, 34, 34);
  --main-menu-child-txt-color: rgb(206, 206, 206);
  --main-menu-child-lnk-color: rgb(214, 214, 214);
  --main-menu-child-lnk-hov-color: rgb(239, 239, 239);
}
/** END: VARIABLES **/

.main-menu {
  background: var(--main-menu-bg-color);
  color: var(--main-menu-txt-color);
}
.main-menu a {
  color: var(--main-menu-lnk-color);
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}
.main-menu a:hover {
  color: var(--main-menu-lnk-hov-color);
}

ul#ul-navigation,
ul#ul-navigation ul {
  width: 100%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}
ul#ul-navigation {
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
}
ul#ul-navigation ul {
  flex-direction: column;
  gap: 0;
}

ul#ul-navigation > li {
  position: relative;
  flex: 1 1;
  min-width: 150px;
}

ul#ul-navigation li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 0.5rem;
}
ul#ul-navigation > li.has-child > a::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 0.3s ease-in-out;
}
ul#ul-navigation > li.has-child:hover > a::after {
  transform: rotate(180deg);
}

ul#ul-navigation ul#ul-navigation-child {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  width: 100%;
  padding: 0;
  transition: all 0.3s ease-in-out;
  background: var(--main-menu-child-bg-color);
  color: var(--main-menu-child-txt-color);
  top: 100%;
  left: 0;
}
ul#ul-navigation ul#ul-navigation-child a {
  color: var(--main-menu-child-lnk-color);
}
ul#ul-navigation ul#ul-navigation-child a:hover {
  color: var(--main-menu-child-lnk-hov-color);
}

ul#ul-navigation li.has-child:hover > ul#ul-navigation-child {
  visibility: visible;
  opacity: 1;
}

HTML
Code:
<div class="main-menu">
  <div class="content-wrapper">
    <ul id="ul-navigation">
      <li><a href="/index.php">Home</a></li>
      <li class="has-child">
        <a href="/handbook.php">Handbook</a>
        <ul id="ul-navigation-child">
          <li><a href="/handbook.php?page=rules">Rules</a></li>
          <li><a href="/handbook.php?page=character-creation">Character Creation</a></li>
          <li><a href="/handbook.php?page=staff">Staff</a></li>
        </ul>
      </li>
      <li><a href="/memberlist.php">Accounts</a></li>
      <li><a href="/search.php">Search</a></li>
      <li class="has-child">
        <a href="">Link</a>
        <ul id="ul-navigation-child">
          <li><a href="">Link</a></li>
          <li><a href="">Link</a></li>
          <li><a href="">Link</a></li>
        </ul>
      </li>
      <li class="has-child">
        <a href="">Link</a>
        <ul id="ul-navigation-child">
          <li><a href="">Link</a></li>
          <li><a href="">Link</a></li>
          <li><a href="">Link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>
]]>