I added a dropdown button with a down arrow (image) with the help of https://www.w3schools.com/howto/howto_js_dropdown.asp. However, after adding the down arrow image, the image area of the button cannot be clicked? Not quite sure what went wrong here, the button is still functional.
HTML:
<html>
<head>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function dropdownMenu() {
document.getElementById("myDropdown").classList.toggle("show");
}</script>
</head>
<body>
<!-- dropdown feature -->
<div class="dropdown">
<button onclick="dropdownMenu()" class="dropbtn">User
<!--image cant be clicked???-->
<img src="images.png" style="height:8px; width:10px; margin-bottom: 2px; margin-left: 5px;">
</button>
<!-- dropdown content -->
<div id="myDropdown" class="dropdown-content">
Profile
Settings
Logout
</div>
</div>
</body>
</html>
CSS:
.dropbtn {
background-color: white;
color: black;
padding: 10px;
font-size: 14px;
border: none;
cursor: pointer;
position: absolute;
top: -69.5px;
left: 1280px;
border-radius: 4px;
width: 90px;
}
.dropbtn:hover, .dropbtn:focus {
background-color: rgb(218, 218, 218);
}
.dropdown {
position: absolute;
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: -20px;
left: 1210px;
background-color: #f1f1f1;
min-width: 164px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 6px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
Can someone please help identify what is the error here? Thanks a lot!
Just add the pointer-events: none css property to the i tag element:
.fa {
pointer-events: none;
}
to prevent any pointer events for the <i> tag
Live Demo: CodePen
Related
I have a "main-div" with specific height and a dropdown on bottom part inside it. The dropdown is causing extra scroll. Is there any way to stop causing scroll and make it overlap through the parent div?
(height and properties of the main div cannot be changed in my real situation)
.main-div{
height: 300px;
width: 600px;
overflow-y: scroll;
border: 2px solid #404040;
}
.dropdown {
position: relative;
display: inline-block;
margin-bottom: 10px;
margin-top: 20px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #109fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.other-content{
height: 280px;
background-color: rgb(80, 210, 166);
}
.button-1{
background-color: #180f37;
padding: 10px;
border: #0f1c40;
color: #fff;
}
<div class="main-div">
<div class="other-content">
<h4>Scroll down to see the button</h4>
</div>
<div class="dropdown">
<span class="button-1">Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</div>
I am having some trouble with a menu in Elementor. Please see this page: https://boys-cry.com/ On the first 2 menu items, 'We' and 'Clients' I have set up a popup of text to appear under the menu when each is clicked. However when one is clicked, you can't click on a different one without 'closing the popup' first by click away underneath the text to close that popup and then the menu becomes clickable again.
The desired outcome I am trying to achieve is like the menu on this page: https://www.am-production.co.uk/ where the text appears underneath each menu item that expands when clicked. Any ideas on some help for a method or plugin to achieve this please?
Thank you!
Code of the logo/menu button:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
color: #00000000;
padding: 40px 12px 40px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
background-repeat: no-repeat;
background-size: 100px 100px;
}
.dropbtn:hover {
color: #00000000;
padding: 40px 12px 40px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
background-repeat: no-repeat;
background-size: 100px 100px;
}
.dropbtn:focus {
color: #00000000;
padding: 40px 12px 40px 12px;
font-size: 16px;
border: none;
cursor: pointer;
background: url(https://boys-cry.com/wp-content/uploads/2022/04/bc_logo_black.png);
background-repeat: no-repeat;
background-size: 100px 100px;
outline: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #00000000;
min-width: 180px;
z-index: 1;
margin-top: 20px;
margin-left: 18px;
}
.dropdown-content a {
color: black;
font-family: helvetica;
font-size: 16px;
font-weight: 300;
padding: 2px 2px;
text-decoration: none;
display: block;
}
hr.solid {
border-left: none;
border-right: none;
border-top: 1px solid #000000;
border-bottom: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<hr class="solid">
WE
<hr class="solid">
CLIENTS
<hr class="solid">
GET IN TOUCH
<hr class="solid">
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
I have change some CSS .. you may apply it and get your desire result..
.elementor-469 .elementor-element.elementor-element-148ab54 {
transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
margin-top: unset !important;
margin-bottom: 0px;
padding: 0px 0px 0px 10px;
z-index: 0;
position: absolute !important;
top: 220px !important;
width: 100% !important;
}
Thanks & Enjoy
I'm trying to add a navigation bar to a web app I'm making for a class, and I wanted to use a drop-down menu in it (too many things to include to put everything straight across).
I want the bar to be fixed to the top of the page, but when I put in position: fixed;, the drop-down menu stops working.
Is there any way around this? Am I just putting the position: fixed; in the wrong spot, or is conflicting with the drop down content having position: absolute; maybe...?
(I'm very new to web stuff, so if you see anything else I could change/approve, please let me know! Advice very much appreciated)
ul {
list-style-type: none;
margin: 0;
top: 0;
position: fixed;
width: 100%;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
</br>
</br>
<ul>
<li><a class="active" href="/homePageAgent">Home</a></li>
<li class="dropdown">
View Pages
<div class="dropdown-content">
View Booked Flights
View Top Customers
</div>
</li>
<li style="float:right">Logout</li>
</ul>
</head>
</html>
Basically, "View Pages" should become a drop down menu when hovered over with the mouse, and it does if I take out the "position:fixed;" line, but... I want the position to be fixed.
Put your navigation into a layer. And make this layer with fixed position.
.navbar-top {
margin: 0;
padding: 0;
width: 100%;
top: 0;
position: fixed;
}
ul {
list-style-type: none;
margin: 0;
top: 0;
/*position: fixed;*/
width: 100%;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
</head>
<body>
<div class="navbar-top">
<ul>
<li><a class="active" href="/homePageAgent">Home</a></li>
<li class="dropdown">
View Pages
<div class="dropdown-content">
View Booked Flights
View Top Customers
</div>
</li>
<li style="float:right">Logout</li>
</ul>
</div>
</body>
</html>
You can delete ul{overflow:hidden;}
You should not apply for the position:fixed on the UL
You can use a div to warp the UL and apply on it the position fixed.
Here is one way to achieve this (live demo):
.mainheader {
height: 25px;
position: fixed;
display: block;
z-index: 10;
background: #333;
width: 100%;
font-size: 14px;
top: 0;
font-family: Calibri;
}
.nav {
width: 100%;
height: 25px;
background: #333;
margin: 0 auto;
}
ul {
list-style-type: none;
margin: 0;
top: 0;
width: 100%;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #111;
}
li.dropdown {
display: inline-block;
}
.active {
background-color: #4CAF50;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<html>
<head>
</head>
<body>
<div class="mainheader">
<div class="nav">
<ul>
<li>
<a class="active" href="/homePageAgent">Home
</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">View Pages
</a>
<div class="dropdown-content">
<a href="/agentViewFlights">View Booked Flights
</a>
<a href="/agentTopCustomers">View Top Customers
</a>
</div>
</li>
<li style="float:right">
<a href="/logout">Logout
</a>
</li>
</ul>
</div>
</div>
</body>
</html>
I want sidebar menu in such a way that when I click on clients option it should remove from its position
And display to the first position and remaining menu list get hidden and show when hover on "<" icon, so how to do this using CSS and jQuery actually I don't have that much idea about front-end part.
<html>
<head>
<style>
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; */
font-size: 28px;
padding: 0px 10px;
}
</style>
</head>
<body>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<script>
$(".main-menu li").click(function () {
$('li', $(this).closest('ul')).not(this).hide();
});
</scrip>
</body>
</html>
Expected output:
when clicking on clients option it should remove and show the first option and remaining option list get hidden like this but should show on mouse hover
Above image to show remaining options in hidden and on hover show list
Now list should be on hover
Try This
I updated some css and Jquery Functions
Is It Perfect As Per Your Requirement ?
$(document).on('click','.sidenav a',function(){
$('.sidebar').show('slow');
$('.sidenav').append($('.topnav')[0].innerHTML);
$('.topnav').empty();
$('.topnav').append($(this)[0].outerHTML)
$('.sidenav a').hide();
$(this).remove()
});
$('.sidebar').hover(function(){
$('.sidenav a').show('slow');
$(this).hide('slow')
});
.topnav {
overflow: hidden;
}
.topnav a {
float: left;
color:#2196F3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 30px;
}
.sidebar{
height:20px;
background:red;
color:#fff;
position:relative;
width:5px;
text-align:center;
line-height:40px;
}
.sidebar:after{
content:"";
position:absolute;
height:0;
width:0;
left:100%;
top:0;
border:10px solid transparent;
border-left: 5px solid red;
}
.sidenav a {
padding: 6px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; */
font-size: 28px;
padding: 0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topnav"></div>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<br/>
<div class="sidebar" style="display:none"></div>
$(".sidenav>a").click(function () {
$(this).siblings('a').not(this).hide();
});
$(".sidenav").find('div').hover(function(){
$('a').css("display","block");
})
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px;
font-size: 28px;
padding: 0px 10px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="sidenav">
About
Services
Clients
Contact
<div> < </div>
</div>
</body>
</html>
Try Following Whis includes the Css Slider
$('.sidenav a').click(function(){
$('.sidenav a').not(this).hide();
$('.sidebar').show('slow');
});
$('.sidebar').hover(function(){
$('.sidenav a').show('slow');
$(this).hide('slow')
});
.sidebar{
height:20px;
background:red;
color:#fff;
position:relative;
width:5px;
text-align:center;
line-height:40px;
}
.sidebar:after{
content:"";
position:absolute;
height:0;
width:0;
left:100%;
top:0;
border:10px solid transparent;
border-left: 5px solid red;
}
.sidenav a {
padding: 6px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; */
font-size: 28px;
padding: 0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidenav">
About
Services
Clients
Contact
</div>
<br/>
<div class="sidebar" style="display:none"></div>
Just like this http://www.w3schools.com/html/default.asp "HTML HOME" button color is green because that's the active link.
So how to do the same on my website?
My HTML code:
<!-- Website fixed header-->
<div class="dropdown website" style="left:0px;">
<button class="dropbtn website"><div class="hoverwebsite">Website Name</div></button>
<div class="dropdown-content website" style="left:0;">
</div>
</div>
My CSS:
/* Top header orange color */
div#fixedheader {
position:fixed;
top:0px;
left:0px;
width:100%;
background: url(images/header.png) repeat-x;
padding:20px;
}
/* Dropdown hover button */
.dropbtn.website {
top:0px;
position: fixed;
background-color: #000000;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
}
.dropdown.website {
top: 43px;
position: fixed;
display: inline-block;
}
.dropdown-content.website {
display: none;
position: fixed;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content.website a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content.website a:hover {
background-color: #f1f1f1;
color: #f1f1f1;}
.dropdown.website:hover .dropdown-content {
display: block;
}
.dropdown.website:hover .dropbtn.website {
background-color: #4CAF50;
}
.hoverwebsite {
color: #f2f2f2;
font-weight:bold;
}
a:active {
background-color: yellow;
}
</style>
Here is my JSFiddle. Let me know if you need more details.
Add class="active" in the anchor tag which you want to keep active
div#fixedheader {
position:fixed;
top:0px;
left:0px;
width:100%;
background: url(images/header.png) repeat-x;
padding:20px;
}
/* Dropdown hover button */
.dropbtn.website {
top:0px;
position: fixed;
background-color: #000000;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
padding:0px;
}
.dropdown.website {
top: 43px;
position: fixed;
display: inline-block;
}
.dropdown-content.website {
display: none;
position: fixed;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content.website a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content.website a:hover {
background-color: #f1f1f1;
color: #f1f1f1;}
.dropdown.website:hover .dropdown-content {
display: block;
}
.dropdown.website:hover .dropbtn.website {
background-color: #4CAF50;
height:38px;
}
.hoverwebsite {
color: #f2f2f2;
font-weight:bold;
}
a{
height:38px;
display:block;
padding-top:16px;}
a.active {
background-color: #4CAF50;
color: #f2f2f2;
}
<div class="dropdown website" style="left:0px;">
<button class="dropbtn website">Website Name</button>
<div class="dropdown-content website" style="left:0;">
</div>
</div>
</div>
EDIT 1:
Have this js code in the page where you want anchor tag to remain active. I have removed active class from anchor tag in html code. Have script reference to jquery library too.
JS:
$(document).ready(function() {
$('#website').addClass('active');
});
EDIT 2:
You possibly can't deal with margins in button, make button position absolute instead of fixed and align them using top, left, right, bottom css properties
.dropbtn.website {
top:0px;
background-color: #000000;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
left: 0px;
padding:0px;
position:absolute;
left:10px;
width:150px;
}
.dropdown.website {
Top:43px;
position: fixed;
display: inline-block;
margin-right:10px;
}
Codepen
Use this css to see how it can be aligned.
EDIT 3:
Use this in your index file
<script>
$(document).ready(function() {
$('#website').addClass('active');
if($('#website2').hasClass('active'))
$('#website2').removeClass('active');
});
</script>
and this script in your yooo.html file
<script>
$(document).ready(function() {
if($('#website').hasClass('active'))
$('#website').removeClass('active');
$('#website2').addClass('active');
});
</script>
Also check the updated html i have changed the id of second anchor tag to website2