CODEWITHSUNDEEP
htmlcssmenuhover
user1827421
user1827421

Reputation: 51

Show menu items on hover

I am currently stuck on a relatively simple CSS Menu Design, but I cannot get it done. It is a top menu bar with width: 100vw; position: fixed; and a left bar with height:100vw; position: fixed;

enter image description here

The idea (where I struggle) is the left bar should show "subitems" on hover. I created this screenshot with PPT, but do not understand what DOM element would be good to display it like this via display: inline?

enter image description here

EDIT:

<style > 
      * {
  outline: none;
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {

    background-color: #f6f5f1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", sans-serif;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.menu {
    overflow: hidden;
    background-color: #2c3e50;
    position: fixed;
    top: 0;
    min-height: 100vh;
    height: 100vh;
    z-index: 100;
}

.menu a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
}

.menu a:hover {
    color: #f2f2f2;
    background-color: #2ecc71;
}

.nav {
    overflow: hidden;
    background-color: #2c3e50;
    position: fixed;
    top: 0;
    width: 100%;

    z-index: 100;
}

.nav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 700;
}

.nav a.active {
    background-color: #2ecc71;
    color: white;
}

.nav .icon {
    float: right;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 101;
    top: 0;
    left: 0;
    background-color: #2ecc71;
    overflow-x: hidden;
    transition: 0.05s;
    padding-top: 60px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 17px;
    color: #fff;
    display: block;
    transition: 0.05s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

</style >
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style2.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>

<body>

    <div id="side" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a href="#">Home</a>
        <a href="#" style="font-weight:700">First One</a>
        <a href="#">New</a>
        <a href="#">View</a>
        <a href="#" style="font-weight:700">Second One</a>
        <a href="#">Plan</a>
        <a href="#">View</a>
        <a href="#" style="font-weight:700">Settings</a>
        <a href="#">Account</a>
        <a href="#">Settings</a>
        <a href="#">Logout</a>
    </div>
    <div class="menu">
        <a href="#home" class="active"><i class="fa fa-bars"></i></a>
        <br>
        <a href="#home" class="active" onclick="setColor('#f8f999')"><i class="fas fa-mouse-pointer fa-fw"></i></a>
        <br>
        <a href="#home" class="active"><i class="fas fa-pencil-alt fa-fw"></i></a>
        <br>
        <a href="#home" class="active"><i class="fas fa-vector-square fa-fw"></i></a>
        <br>
        <a href="#home" class="active"><i class="fas fa-image fa-fw"></i></a>
        <br>
        <a href="#home" class="active"><i class="far fa-circle fa-fw"></i></a>
        <br>
        <a href="#home" class="active"><i class="fas fa-image fa-fw"></i></a>
        

    </div>
    <div class="nav">
        <a href="#home" class="active" onclick="openNav()"><i class="fa fa-bars fa-fw"></i></a>
        <a href="#news">Test</a>
        <a href="javascript:void(0);" class="icon" style="font-weight:400; font-size:14px">Welcome, fj <i class="fas fa-ellipsis-v"></i></a>
    </div>

    <div style="height:100vh; width:100vw;">



    </div>
    
    <script>
            function openNav() {
            document.getElementById("side").style.width = "250px";
        }

        function closeNav() {
            document.getElementById("side").style.width = "0";
        }
    </script>

    
</body>

</html>

Top Menu bar works as expected, but the individual items should be a different type of menu with individual lines to show. Any idea how to do it?

Thanks!

fj

Upvotes: 0

Views: 1068

Answers (1)

J4R
J4R

Reputation: 1104

I would suggest you, to use a ul li structure, for sub menus like u want to use. A possible solution could be something like this:

* {
  outline: none;
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  background-color: #f6f5f1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", sans-serif;
  height: 100vh;
  margin: 0;
  padding: 0;
}

.menu {
  background-color: #2c3e50;
  position: fixed;
  top: 45px;
  min-height: 100vh;
  height: 100vh;
  z-index: 100;
  overflow: visible;
}

.menu ul {
  padding: 0;
  margin: 0;
}

.menu li {
  list-style-type: none;
  position: relative;
  display: flex;
}

.menu ul li ul {
  display: none;
}

.menu li:hover > ul {
  display: flex;
  position: absolute;
  top: 0;
  background-color: #2c3e50;
  left: 53px;
  width: auto;
}

.menu a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
}

.menu a:hover {
  color: #f2f2f2;
  background-color: #2ecc71;
}

.nav {
  overflow: hidden;
  background-color: #2c3e50;
  position: fixed;
  top: 0;
  width: 100%;

  z-index: 100;
}

.nav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
}

.nav a.active {
  background-color: #2ecc71;
  color: white;
}

.nav .icon {
  float: right;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  background-color: #2ecc71;
  overflow-x: hidden;
  transition: 0.05s;
  padding-top: 60px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 17px;
  color: #fff;
  display: block;
  transition: 0.05s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style2.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="side" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Home</a>
  <a href="#" style="font-weight:700">First One</a>
  <a href="#">New</a>
  <a href="#">View</a>
  <a href="#" style="font-weight:700">Second One</a>
  <a href="#">Plan</a>
  <a href="#">View</a>
  <a href="#" style="font-weight:700">Settings</a>
  <a href="#">Account</a>
  <a href="#">Settings</a>
  <a href="#">Logout</a>
</div>
<div class="menu">
  <ul>
    <li>
      <a href="#home" class="active" onclick="setColor('#f8f999')"><i class="fas fa-mouse-pointer fa-fw"></i></a>
      <ul>
        <li>
          <a href="#home" class="active"><i class="fas fa-pencil-alt fa-fw"></i></a>
        </li>
        <li>
          <a href="#home" class="active"><i class="fas fa-pencil-alt fa-fw"></i></a>
        </li>
        <li>
          <a href="#home" class="active"><i class="fas fa-pencil-alt fa-fw"></i></a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#home" class="active"><i class="fas fa-pencil-alt fa-fw"></i></a>
    </li>
    <li>
      <a href="#home" class="active"><i class="fas fa-vector-square fa-fw"></i></a>
      <ul>
        <li>
          <a href="#home" class="active"><i class="fas fa-pencil-alt fa-fw"></i></a>
        </li>
        <li>
          <a href="#home" class="active"><i class="fas fa-pencil-alt fa-fw"></i></a>
        </li>
        <li>
          <a href="#home" class="active"><i class="fas fa-pencil-alt fa-fw"></i></a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#home" class="active"><i class="fas fa-image fa-fw"></i></a>
    </li>
    <li>
      <a href="#home" class="active"><i class="far fa-circle fa-fw"></i></a>
    </li>
    <li>
      <a href="#home" class="active"><i class="fas fa-image fa-fw"></i></a>
    </li>
  </ul>
</div>
<div class="nav">
  <a href="#home" class="active" onclick="openNav()"><i class="fa fa-bars fa-fw"></i></a>
  <a href="#news">Test</a>
  <a href="javascript:void(0);" class="icon" style="font-weight:400; font-size:14px">Welcome, fj <i
    class="fas fa-ellipsis-v"></i></a>
</div>

<div style="height:100vh; width:100vw;">


</div>

<script>
    function openNav() {
        document.getElementById("side").style.width = "250px";
    }

    function closeNav() {
        document.getElementById("side").style.width = "0";
    }
</script>


</body>
</html>

Upvotes: 1

Related Questions