I am trying to expand the links in the side navbar horizontally. I have tried hard by going through the tutorials of bootstrap 4. My code is following.
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#">Rami Villa</a>
</li>
<li>
<a href="#">Alpine Metals Jafza</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
The outcome of this code is as following.
.
When I click the residential link it dropdowns as follows.
.
However I actually want something like this.
I have do some modification in your code, and has done the output as your requirement.
HTML
<aside>
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="collapse list-unstyled submenu" id="homeSubmenu">
<li>
<a href="#">Rami Villa</a>
</li>
<li>
<a href="#">Alpine Metals Jafza</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
</aside>
CSS
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
aside {
width: 100%;
height: 100%;
max-width: 200px;
}
aside .dropright {
position: relative;
background: yellow;
}
aside .dropright a {
padding: 10px;
display: block;
}
aside .dropright .submenu {
position: absolute;
background: black;
left: 100%;
right: auto;
width: 100%;
top: 0;
}
aside .dropright .submenu li a {
color: #fff;
display: block;
}
Here is the codepen link
I'm quite new to programming, but why don't you use the example of Bootstrap:
Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Default dropright button-->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Residential
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links-->
<a class="dropdown-item" href="#">Rami Villa</a>
<a class="dropdown-item" href="#">Alpine Metals Jafza</a>
<a class="dropdown-item" href="#">Home 3</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
You need to use .dropdown-menu
on your <ul>
instead of .collapse
<li class="active dropright">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle">
<i class="fas fa-home"></i>
Residential
</a>
<ul class="list-unstyled dropdown-menu" id="homeSubmenu">
<li>
<a href="#">Rami Villa</a>
</li>
<li>
<a href="#">Alpine Metals Jafza</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.