CODEWITHSUNDEEP
htmlcssdrop-down-menufrontend
bahar
bahar

Reputation: 1

How can I create sidebar menu and clickable sub menu with html css bootstrap?

This is a piece of my code for sidebar menu.I want to create dashboard and drop down menu in left of screen. when I go on flower don't show it's sub menu. (i want clickable)

  <div class="navbar-default navbar-right sidebar">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav-fall">
                        <li class="charj"><a href="">flower<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a>
                            <ul class="nav-second-level">
                                <li><a href="">name</a></li>
                                <li><a href="">price</a></li>
                            </ul>
                        </li>

                        <li><a href="">one</a></li>
                        <li><a href="">two</a></li>
                        <li><a href="">three</a></li>
                    </ul>

                </div>
            </div>

<!------css----->

.sidebar .fa.arrow:before {
content: "\f105";
}
.sidebar .nav-second-level {
  display: none;
}
.sidebar .nav-fall .charj a:hover .nav-second-level {
  display: block;
}

Upvotes: 0

Views: 3804

Answers (1)

Gerard
Gerard

Reputation: 15796

Below 2 examples. The first one uses hover, the second one uses a click event.

.sidebar .fa.arrow:before {
  content: "\f105";
  margin-left: 3px;
}

.nav-second-level {
  display: none;
}

.sidebar .nav-fall li:hover .nav-second-level {
  display: block;
}
<div class="navbar-default navbar-right sidebar">
  <div class="sidebar-nav navbar-collapse">
    <ul class="nav-fall">
      <li class="charj"><a href="">flower<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a>
        <ul class="nav-second-level">
          <li><a href="">name</a></li>
          <li><a href="">price</a></li>
        </ul>
      </li>
      <li><a href="">one</a></li>
      <li><a href="">two</a></li>
      <li><a href="">three</a></li>
    </ul>
  </div>
</div>

$(document).on("click", ".charj", function() {
  $(this).find("ul").show();
})
.sidebar .fa.arrow:before {
  content: "\f105";
  margin-left: 3px;
}

.nav-second-level {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-default navbar-right sidebar">
  <div class="sidebar-nav navbar-collapse">
    <ul class="nav-fall">
      <li class="charj"><a href="#">flower<i class="fa fa-angle-right arrow" aria-hidden="true"></i></a>
        <ul class="nav-second-level">
          <li><a href="">name</a></li>
          <li><a href="">price</a></li>
        </ul>
      </li>
      <li><a href="">one</a></li>
      <li><a href="">two</a></li>
      <li><a href="">three</a></li>
    </ul>
  </div>
</div>

Upvotes: 1

Related Questions