Adjusting Drop down menu position
Question
I'm creating a list using javascript code, that list is supposed to be drop down menu, I succeed in creating, however, I can't manage to position it right under the notification icon
HTML
<html>
<!-- Head -->
<head>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
-->
</head>
<!-- Body -->
<body>
<div class="navbar">
<a href="#" class="text"> <img src="logo.png" alt="logo" width="30px" height="26px"> Scramblez </a>
<a class="icons"> <i onclick="myFunction(this), showNotifications()" class="fa fa-bell" ></i> </a>
<a class="adjustOtherIcons"> <i class=" fa fa-user-circle"> </i> </a>
<a class="adjustOtherIcons"> <span class="glyphicon glyphicon-log-out"></span> </a>
</div>
<!-- Javascript code -->
<script>
function myFunction(x){
x.classList.toggle("fa-bell-slash");
}
function showNotifications(){
// Establish the array which acts as a data source for the list
var listData = [
'A',
'B',
'C'
//Array for notifications
];
// Make a container element for the list
var listContainer = document.createElement('div');
//div.setAttribute('id','divList');
// Add it to the page
document.getElementsByTagName('body')[0].appendChild(listContainer);
// Make the list
var listElement = document.createElement('ul');
//ul.setAttribute('id','ulList');
//document.getElementsByTagName("ul")[0].setAttribute("id", "ulID");
listElement.id = "myListID";
listElement.classList.add("myListClass");
// Add it to the page
listContainer.appendChild(listElement);
// Set up a loop that goes through the items in listItems one at a time
var numberOfListItems = listData.length;
for (var i = 0; i < numberOfListItems; ++i) {
// create an item for each one
var listItem = document.createElement('li');
// Add the item text
listItem.innerHTML = listData[i];
// Add listItem to the listElement
listElement.appendChild(listItem);
}
}
window.onclick = function(event) {
if (!event.target.matches('.fa.fa-bell')) {
var hide = document.getElementById("myListID");
hide.style.display = 'none';
}
}
</script>
</body>
<!-- Closing of html tag -->
</html>
CSS:
body
{
font-family: Arial, Helvetica, sans-serif;
/* background-color: #ABB1BA; */
}
/* Style the navigation bar */
.navbar
{
width: 100%;
background-color: #07716E;
height: 2%;
}
/* Navbar links */
.navbar a
{
float: left ;
text-decoration: none;
color: #CCCCCC;
}
.text
{
padding-top: 10px;
font-family: cursive;
font-weight: bold;
padding-left: 5px;
}
.icons
{
padding-top: 14px;
padding-left: 77%;
}
.adjustOtherIcons
{
padding-top: 14px;
padding-left: 4%;
}
.fa.fa-bell
{
font-size: 120%;
}
.fa.fa-user-circle, .glyphicon.glyphicon-log-out
{
font-size: 120%;
}
/* List */
ul
{
position: absolute;
background-color: #f1f1f1;
width: 12%;
height: auto;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
li
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
Also when I click away after the showing the dropdown menu, it gets hidden, but when I show it again and click away, it doesn't get hidden anymore, why is that?
1 answers
solution1
0 2019-04-30 04:41:04
Please Try the below code with your image link and fontasome cdn and let me know. I have made minor changes to your style's as well
body { font-family: Arial, Helvetica, sans-serif; /* background-color: #ABB1BA; */ } /* Style the navigation bar */ .navbar { width: 100%; background-color: #07716E; height: 2%; display: flex; align-items: center; margin-bottom: unset !important; padding: 10px; } /* Navbar links */ .navbar a { float: left ; text-decoration: none; color: #CCCCCC; } .text { font-family: cursive; font-weight: bold; } .icons-container { display: flex; align-items: center; justify-content: space-between; position: absolute; right: 0; } .icons-container a{ margin: 0px 10px; } .adjustOtherIcons { } .fa.fa-bell { font-size: 120%; } .fa.fa-user-circle, .glyphicon.glyphicon-log-out { font-size: 120%; } /* List */ ul { position: absolute; background-color: #f1f1f1; width: 12%; height: auto; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1 } li { color: black; padding: 12px 16px; text-decoration: none; display: block; } .myListClass{ margin-top: 33px; padding: unset; width: 50px; right: 60px; } /* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */ @media screen and (max-width: 500px) { .navbar a { float: none; display: block; } }
<html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-theme.min.css" rel="stylesheet"> <link href="css/font-awesome.min.css" rel="stylesheet"> <link href="css/bootstrap-social.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> </head> <body> <div class="navbar"> <a href="#" class="text"> <img src="https://picsum.photos/30/26" alt="logo" width="30px" height="26px"> Scramblez </a> <div class="icons-container"> <div id="dropdown"> <a class="icons"> <i onclick="myFunction(this), showNotifications()" class="fa fa-bell" ></i></a> </div> <a class="adjustOtherIcons"> <i class=" fa fa-user-circle"> </i></a> <a class="adjustOtherIcons"> <span class="glyphicon glyphicon-log-out"></span> </a> </div> </div> <script> function myFunction(x) { x.classList.toggle("fa-bell-slash"); } function showNotifications() { // Establish the array which acts as a data source for the list var listData = [ 'A', 'B', 'C' //Array for notifications ]; // Make a container element for the list var listContainer = document.createElement('div'); //div.setAttribute('id','divList'); // Add it to the page document.getElementById('dropdown').appendChild(listContainer); // Make the list var listElement = document.createElement('ul'); //ul.setAttribute('id','ulList'); //document.getElementsByTagName("ul")[0].setAttribute("id", "ulID"); listElement.id = "myListID"; listElement.classList.add("myListClass"); // Add it to the page listContainer.appendChild(listElement); // Set up a loop that goes through the items in listItems one at a time var numberOfListItems = listData.length; for (var i = 0; i < numberOfListItems; ++i) { // create an item for each one var listItem = document.createElement('li'); // Add the item text listItem.innerHTML = listData[i]; // Add listItem to the listElement listElement.appendChild(listItem); } } window.onclick = function(event) { if (!event.target.matches('.fa.fa-bell')) { var hide = document.getElementById("myListID"); hide.style.display = 'none'; } } </script> </body> </html>
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.
Related Question
How do I position a menu list underneath the drop down icon?
Change a header's position dynamically when activating drop down menu
Jquery drop down menu, how to position within my container div
Move div back to original position when closing drop down menu
How To Place Mega Drop Down Menu With Position Relative?
How would I control the position of a drop down select menu?
drop down menu of bootstrap
Drop down menu effects
Drop down menu not dropping
Drop Down Menu “Mouseleave”
Related Tags