Could someone provide guidance on creating a Bootstrap 4 Sidebar Menu Dropdown similar to the one shown in the image below?
https://i.sstatic.net/NZ8B8.jpg
I am considering using Dropright buttons but have been unsuccessful in finding good examples of code. Can anyone offer a starting point or a functional example of a menu like that using Bootstrap?
Customized Bootstrap 4 SideMenu Bar with Dropdown Feature: Explore and test this design in full-page mode.
html, body {
margin:0;
padding:0;
height:100%;
}
* {box-sizing: border-box;}
.container {
height:100% !important;
margin: 0 !important;
padding: 0 !important;
}
a {
color:#fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff;
padding:0px 0px 20px 0px;
width:100%;
display:block;
height:100%;
}
li {
padding:20px 20px 0 20px;
width:100%;
list-style-type: none;
color:#fff;
}
.container ul {height:100%;}
.container > ul {
width:250px;
background-color:#225fe8;
position:relative;
padding:0 !important;
overflow:visible;
}
.container > ul > li {}
.container > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul {
display:none;
position:absolute;
right:-250px;
top:0;
padding:0 !important;
width:250px;
background-color:#193d8e;
}
a:hover {
color: #fbfbfb !important;
}
i{
margin-top: 4px;
padding-left: 8px;
}
.container > ul > li:hover > ul {
display:block;
}
.container > ul > li > ul >li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li > ul {
display:none;
position:absolute;
right:-250px;
padding:0 !important;
top:0;
width:250px;
background-color:#112551;
}
.container > ul > li > ul > li:hover ul {
display:block;
}
.container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;}
.container > ul > li > ul > li ul li ul li {
border-bottom:1px dotted #fff;
padding:20px;
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<ul class="">
<li class="">
<a tabindex="-1" href="#">HOME <i class="fa fa-angle-right" style="font-size:20px"></i>
</a>
<ul class="">
<li class=""><a tabindex="-1" href="#">Locations</a></li>
<li class=""><a href="#">Strategy</a></li>
<li class=""><a href="#">Research</a></li>
<li class="">
<a href="#"> Products <i class="fa fa-angle-right" style="font-size:20px"></i></a>
<ul class="parent">
<li >
<a href="#">
Product List
</a>
<ul class="child">
<li >Platforms</li>
<li > Funds</li>
<li >Wealth</li>
<li >Listed </li>
<li >Wealth </li>
<li >Listed</li>
<li >Listed </li>
</ul>
</li>
<li ><a href="#">Model Portfolios</a></li>
<li ><a href="#">Non-approved Locations</a></li>
</ul>
</li>
<li class=""><a href="#">Implementation</a></li>
</ul>
</li>
<li ><a href="#">Contact</a></li>
<li ><a href="#">Address</a></li>
<li ><a href="#">News</a></li>
</ul>
</div>
<script type="text/javascript">
$('.child').hide();
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
</script>
</body>Verify the functionality and appearance for suitability.
Here are the adjustments I made to get closer to the posted image.
Shoutout to @Amaresh S M!
Making Changes:
Removed tabindex -1 from html
Eliminated the i tag in css
Got rid of the unnecessary jquery script for this scenario
To create a menu with 4 parts (3 dynamic and 1 fixed):
Changed container from .container to .container-fluid for full width
Transformed the original container into a col-9 (75% of the width)
Updated all instances of .container in css to col-9
Added a fixed col-3 on the right side (representing the static part of the menu, 25% of the width)
Each of the three parts in col-9 have a width of 33.33%
The single .row occupies 100% of the height
Key Points:
.row-menu-full-width {
height: 100%;
}
.dynamic-part {
margin: 0 !important;
padding: 0 !important;
background-color: black;
float: left;
}
a {
color:#fff !important;
text-decoration: none !important;
border-bottom:1px dotted #fff;
padding:0px 0px 0px 0px;
width:100%;
display:block;
}
/* Additional CSS Rules... */
.static-part {
margin: 0 !important;
padding: 0 !important;
background-color: lightgray;
float: right;
}<body>
<div class="container-fluid container-menu-full width">
<div class="row row-menu-full-width">
<div class="col-9 dynamic-part">
<ul class="">
<li class="">
<a href="#">HOME<i class="fa fa-angle-right" style="font-size:20px"></i></a>
<ul class="">
<li class=""><a href="#">Locations</a></li>
/* Nested list items... */
</ul>
</li>
<li ><a href="#">Contact</a></li>
<li ><a href="#">Address</a></li>
<li ><a href="#">News</a></li>
</ul>
</div>
<div class="col-3 static-part">
// Representation of the fixed column
</div>
</div>
</div>
</body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>I'm encountering an issue with applying a toggleClass that is not working to add the new class. Can someone help me understand what's happening? <a href="#" id="cf_onclick">Click</a> <div id="main" class="invisible"> Hi there ...
I'm new to using bootstrap and I'm encountering an issue where my image is not showing up. Strangely, the default background image is appearing even though I have not referenced it in the HTML or CSS files. View my code here ...
Ugh, I'm really struggling with this. I want to create a quiz where only the radio button is clickable, not the text itself. Can anyone help me figure out how to do this? I have two codes below that I don't quite understand. I'll include th ...
Help! I've been struggling for hours trying to set up a basic Bootstrap Navbar with Nextjs. I also feel like there are other issues besides the error message being displayed. Any suggestions on how to improve this setup overall? Should I use _app.js ...
I'm experiencing an issue with my jquery script where the top two buttons are showing 'undefined' instead of performing the same action as the buttons below them. Could someone please pinpoint where I went wrong? I want the two buttons at t ...
Attempting to create a new type of div using a custom stylesheet with minimal non-bootstrap css. I am trying to convert each style rule from my django static files CSS into a bootstrap class, but I am stuck on viewport-based sizing. Prior to discovering t ...
After searching for answers with no luck, I ended up coming here to ask my question. Here is the code snippet in question : <a href="manage/10000' . $user["user_id"] . ' " class="user_grop">More Info</span></a> I am wondering ...
Is there a jQuery plugin or similar tool available that can change the color of each letter in the word "Google" to match the colors of the Google logo? For instance, if I have the following HTML markup: <span>Google AdWords</span> I would l ...
I recently finished developing a website and I have customized the main vertical scrollbar. Unfortunately, I am facing an issue where it works well on Google Chrome and Safari but not on Mozilla Firefox. Does anyone have any suggestions on how to trouble ...
Could anyone provide guidance on how to reset a dropdown list value using a radio button selection? Specifically, I need the dropdown list to reset to its default "selected" option when a particular radio button is clicked. Any recommended approaches usin ...
I'm currently facing an issue with the navbar in my project. The bootstrap navbar doesn't close automatically after clicking on a link. I have to move my mouse away from the navbar for it to close, which is not ideal. Additionally, I'm worki ...
I have been working on an app that provides users with the best options for places to visit, utilizing Google Maps technology. Here is what I have accomplished so far: Show the user their current location Show the user possible destinations (with marker ...
<input id="checkOldPassword" type="button" title="Check New Password" value="Check New Password" onclick="checkPassword()" /> <input id="newPassword" type="text" maxlength="8" min="8" /> <script language="javascript"> function checkPassw ...
Recently, I delved into the world of html/css/javascript and decided to create a website as a way to practice my skills. However, I have come to realize that many of the methods I used are not considered best practices. I am committed to improving and will ...
I am trying to create a non-editable table that can be overlayed with a div under specific conditions. However, it seems like my current implementation is not working as expected. What could be causing this issue? CSS <style type="text/css"> # ...
Is there a way to customize the color of the border to something other than blue in React Bootstrap? https://i.sstatic.net/ScIw1.jpg ...
I am interested in creating a vertical website that features multiple divs appearing at specific y-points on the page. These divs will contain text and will always be positioned fixed at 20% from the left and about 250px from the top. My goal is to have t ...
Why am I having trouble adding box shadows to input elements in my CSS? I've tried something like this http://jsfiddle.net/DLCTh/, and while it applies correctly to div elements, it doesn't seem to work on text inputs. Am I overlooking something ...
Is there a way to position a div outside the main wrapper (980px) of my website without causing horizontal scrollbars in the 1024px screen size? I'm open to solutions using CSS or jQuery. Any suggestions? The segment that needs to be outside should ...
The output on the page only displays 17 out of 60+ rows of data. I've searched online for a javascript function to help with this, but unfortunately, I couldn't find one. Here is a sample code snippet: <script type="text/javascript"> ...