<li class="button-dropdown" style="top: 2px; margin-right: 5px;">
<a href="javascript:void(0)" class="dropdown-toggle" data-tooltip="Menu">
<i class="fa fa-bars fa-lg" aria-hidden="true" style="vertical-align: initial;"></i> <span>▼</span>
</a>
<ul class="dropdown-menu" style="position: absolute; padding-left: 0px; left: -19px; text-align: left; background-color: rgb(6, 6, 6); top: 21px; width: 220px; z-index: 999; display: none;">
<li style="display: block; padding: 8px 0px;"><a href="https://selleck87.it/" class="usercp" title="Home"><i class="fa fa-home fa-lg" aria-hidden="true"></i><span style="font-size: 15px; color: #efefef;">Home</span></a></li>
<li style="display: block; padding: 8px 0px;"><a href="https://selleck87.it/usercp.php" class="usercp" title="Account"><i class="fa fa-cog fa-lg" aria-hidden="true"></i><span style="font-size: 15px; color: #efefef;">Account</span></a></li>
<li style="display: block; padding: 8px 0px;"><a href="https://www.selleck87.it/memberlist.php" class="usercp" title="Memberlist"><i class="fa fa-users fa-lg" aria-hidden="true"></i><span style="font-size: 15px; color: #efefef;">Memberlist</span></a></li>
<li style="display: block; padding: 8px 0px;"><a href="https://selleck87.it/awards.php" class="usercp" title="Award "><i class="fa fa-trophy fa-lg" aria-hidden="true"></i><span style="font-size: 15px; color: #efefef;">Awards</span></a></li>
</ul>
</li>
global.css
.button-dropdown {
position: relative;
float: left;
}
.nav li a:hover, .nav li a.dropdown-toggle.active {
background-color: #1f1f1f;
color: #8b8b8b!important;
}
.nav li a:hover span, .nav li a.dropdown-toggle.active span {
color: #8b8b8b;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
top: 24px;
left: -20px;
right: 0;
padding: 0;
margin: 0;
z-index: 50;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 155px !important;
padding: 10px;
font-size: 11px;
background: #1f1f1f;
text-shadow: 0 0 rgba(0, 0, 0, 0.1);
}
.nav li .dropdown-menu a:hover {
background: #252525;
}
li.button-dropdown.right {
float: right;
}
ul.dropdown-menu.right-menu {
right: -19px;
}
I was creating a cascade menu but I do not understand why when I click on the button the cascade menu does not open. These are the codes I entered. Where did I go wrong?
It looks like you haven't wrapped it in a dropdown class:
<div class="dropdown">your menu</div>
If you're using Bootstrap, it looks like data-bs-toggle is missing as well.
Do you know if there is any guidance? Because I needed a dropdown menu but not with mouseover but with clik
Are you using Bootstrap or hard-coding?
Try this:
It's been wrapped in a div (dropdown) with addition of data-bs-toggle so that Bootstrap knows to toggle the dropdown on click.
Most of the style options you've included can be passed as classes instead rather than adding style to each -- for example:
<li class="position-absolute ps-0 text-start d-none fs-normal text-primary">
Here is a comprehensive list of Bootstrap components and helpers:
https://getbootstrap.com/docs/5.3/gettin...roduction/
<div class="dropdown"><li class="button-dropdown" style="top: 2px; margin-right: 5px;">
<a href="javascript:void(0)" class="dropdown-toggle" data-bs-toggle="dropdown" data-tooltip="Menu">
<i class="fa fa-bars fa-lg" aria-hidden="true" style="vertical-align: initial;"></i> <span>▼</span>
</a>
<ul class="dropdown-menu" style="position: absolute; padding-left: 0px; left: -19px; text-align: left; background-color: rgb(6, 6, 6); top: 21px; width: 220px; z-index: 999; display: none;">
<li style="display: block; padding: 8px 0px;"><a href="https://selleck87.it/" class="usercp" title="Home"><i class="fa fa-home fa-lg" aria-hidden="true"></i><span style="font-size: 15px; color: #efefef;">Home</span></a></li>
<li style="display: block; padding: 8px 0px;"><a href="https://selleck87.it/usercp.php" class="usercp" title="Account"><i class="fa fa-cog fa-lg" aria-hidden="true"></i><span style="font-size: 15px; color: #efefef;">Account</span></a></li>
<li style="display: block; padding: 8px 0px;"><a href="https://www.selleck87.it/memberlist.php" class="usercp" title="Memberlist"><i class="fa fa-users fa-lg" aria-hidden="true"></i><span style="font-size: 15px; color: #efefef;">Memberlist</span></a></li>
<li style="display: block; padding: 8px 0px;"><a href="https://selleck87.it/awards.php" class="usercp" title="Award "><i class="fa fa-trophy fa-lg" aria-hidden="true"></i><span style="font-size: 15px; color: #efefef;">Awards</span></a></li>
</ul>
</li></div>
Because you're calling (void) on the link it may interfere with Bootstrap's built-in JS but I can't be certain.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
I noticed that I was missing these on the site.
The first one goes in the headerinclude template but I didn't quite understand where to put the second code.
The second one (JavaScript) can interfere with MyBB’s local JavaScript functions, in particular the ‘modal’ application. If you intend on using it regardless, place it at the very bottom of your footer template.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
So in theory, correct me if I am wrong, I should only use this and the dropdown should work properly. Right?
(2024-02-11, 02:05 PM)SELLECK87 Wrote: [ -> ]<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
So in theory, correct me if I am wrong, I should only use this and the dropdown should work properly. Right?
I've made a modified version that doesn't interfere with MyBB's Jquery JS. Upload this to your /jscripts/ folder and put a link to this in your footer template at the very bottom.
<script src="jscripts/boot.js"></script>
