Previously, when my header only had 3 titles, i had no wrapping issues, however after adding another title, that specific title misplaces itself on top of the actual header.
Diagram of desired result: https://i.gyazo.com/3a71cc861daf2ec897cceed30d4bb576.png
Codepen: https://codepen.io/valik140795/pen/qadXOo
I believe the issue is coming from a dropdown button positioning(if not css), yet I am unable to specifically locate the issue.
Code of the button of the title that relocates itself:
<body>
<div class="body">
<div class="block_header">
<div class="lang">RU | ENG</div>
<img src="pictures/logo.png" class="logo" width="220px;" />
<ul>
<style>
.dropbtn {
background-color: #282828;
color: #AA9568;
padding: 0px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #282828;
}
.dropdown {
position: relative;
z-index: 999;
display: inline-block;
}
.dropdown-content {
display: none;
position: fixed;
z-index: 999;
background-color: #282828;
min-width: 180px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #AA9568;
padding: 3px 5px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #282828}
.show {display:block;}
</style>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><a href=#fab>ФАБРИКИ</a></button>
<div id="myDropdown" class="dropdown-content">
Nobilis
Color de Seda
Eugenio Colombo
Libra
</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");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
</script>
Thanks in advance.
The dropdown element that positions on top is out of the ul element that holds the other three, you should put it in the same parent container as them.
Related
I have an html code below
Dropdown-->
About
Base
Blog
Contact
Custom
Support
Tools
Its basically taken from this website https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_filter
This is how it looks like
It does a search on the items displayed in the menu. Now I want this menu to open upwards and not downwards
On looking online, I found I have to provide bottom: 100%; Drop-down menu that opens up/upward with pure css. Now in my case, there are no <ul> or <li> tags. So this is what I did
.dropdown {
position: relative;
display: inline-block;
bottom: 100%; //added this
}
But it doesn't do anything. How can I force the menu to show upwards?
You could do this using Flexbox:
.dropdown-content.show {
display: flex;
flex-direction: column-reverse;
bottom: 45px; /* hardcoded height of the button */
}
Using w3cschool's existing code:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
var dropdown, button;
dropdown = document.getElementById("myDropdown");
button = document.getElementById("myButton");
dropdown.classList.toggle("show");
dropdown.style.bottom = button.offsetHeight + "px";
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {
outline: 3px solid #ddd;
}
.dropdown {
position: relative;
display: inline-block;
padding-top: 250px; /* just for demo purposes */
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
border: 1px solid #ddd;
z-index: 1;
flex-direction: column-reverse; /* show children in a reversed colum (bottom to top) */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: flex;
}
<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>
<div class="dropdown">
<button id="myButton" onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
About
Base
Blog
Contact
Custom
Support
Tools
</div>
</div>
EDIT:
I just removed the hardcoded button height from the CSS and instead calculated the height using Javascript.
See the modified function myFunction() and the added id="myButton" in the markup.
sending in enter image description here the screenshot of the code
You need to add a bit of javascript to do that.. look at this example its pretty straightforward.
<head>
<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 menu 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>
<style>
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.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;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
CLoud
Data
Digitale
Commerece
Crm/Erp
About Us
</div>
</div>
</body>
So, I found this link on clickable dropdown menus but when I implement that, it doesn't work for some reason. I tried adding the html into the gadget but I don't know where to put the JavaScript in.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu 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');
}
}
}
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.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;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
This is the same code used in the example you sent, you can get the javascript and insert at the end of the html between two script tags like this:
<script type="text/javascript">
<!-- javascript GOES HERE -->
<script>
You can add javascript code inside html putting it inside <script></script> tag
Create Drop down menu in blogger using add custom Gadget. In this you can add your own codes. This requires a little bit of CSS and HTML knowledge. Try my code to create drop down menu in blogger. referenced from this blogger post
.dropdown-section1{
border-radius:3px;
width:80%;margin:0 auto;
background:#607d8b;
height:38px;
-webkit-box-shadow: 0 3px 4px 0 rgba(50,50,50,.6);
-moz-box-shadow: 0 3px 4px 0 rgba(50,50,50,.6);
box-shadow: 0 3px 4px 0 rgba(50,50,50,.6);
}
.dropdown-section1 .menu li a {
color:#fff;
font-weight:bold;
text-decoration:none;
}
.dropdown-section1 .menu li {
list-style: none;
float: left;
padding: 10px;
background:#607d8b;
}
.dropdown-section1 .menu li:last-child{
border-right:none !important;
}
.dropdown-section1 .menu .sub-menu li{
float: none;
margin-bottom:0px;
padding: 10px;
}
.dropdown-section1 .sub-menu {
display: none;
position: absolute;
z-index: 100;
width:100px;
margin-left: -50px !important;
margin-top: 10px !important;
}
.dropdown-section1 .menu li:hover > .sub-menu {
display: block;
}
.dropdown-section1 .menu li:hover {
background:#94c018;
}
.dropdown-section1 .menu > li {
border-right:1px solid #ccc;
}
.dropdown-section1 .place-right{
left: 150px;
top: 30px;
}
<div class="dropdown-section1">
<ul class="menu">
<li>Home</li>
<li>Coose Niche
</li><li>Create Blog
</li><li>Moniter Blog
</li><li>DropDown
<ul class="sub-menu">
<li>String</li>
<li>Array
<ul class="sub-menu place-right">
<li>String</li>
<li>Array</li>
<li>Match</li>
</ul>
</li>
<li>Match</li>
</ul>
</li>
<li>About Me</li>
<li>Reach Me</li>
</ul>
</div>
How do I move the drop down menu onto a certain area ?
HTML CODE:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Mirror Page
Link 2
Link 3
</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 menu 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>
CSS CODE:
/* Dropdown Button */
.dropbtn {
background-color: #262829;
color: white;
padding: 16px;
font-size: 16px;
right:80px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
IMAGE OF WHAT I WANT DONE:
want to move the dropdown onto the restoration page
You have to add a top: x px; for your dropdown content in order to place it below your header bar. Like this:
.dropdown-content {
display: none;
position: absolute;
top: 30px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
Any button is set to display: block by default. To align it next to the dropdown buttons, use either float: left or display: inline-block.
I'm testing a navigation bar at top of the web page with a dropbox menu align at right. I have a lot of problems with space from the menu to the background of the bar and also with align icons with text.
My Code is this:
function dropdownClick() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu 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');
}
}
}
}
#charset "UTF-8";
/* CSS Document */
html
{
position: relative;
min-height: 100%;
font-family: Gotham-Light;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
/* Def. Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dedee1;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="assets/css-styles/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>navigation</title>
</head>
<body>
<!-- NAVIGATION -->
<nav>
<ul>
<li>Page1</li>
<li>Page2</li>
<li style="float:right" class="dropdown">
<a class="dropbtn" onclick="dropdownClick()"><i class="material-icons">face</i>Username</a>
<div class="dropdown-content" id="myDropdown">
<i class="material-icons">settings</i> preferències
<i class="material-icons">lock</i> canviar password
<i class="material-icons">power_settings_new</i> log out
</div>
</li>
</ul>
</nav>
</body>
</html>
The boxes of the active link doesn't align to the top of the navigation bar And the icon with the text 'username' aresn't align with each other.
Sorry but I'm beginner in the css styles.
Thanks in advance.
Change li a, .dropbtn display to block instead of inline-block (that causes in this case an unwanted margin).
Another reason is the i, give that a float: left;
Last problem is that submenu appears outside the screen, add a right: 0 to it.
function dropdownClick() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu 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');
}
}
}
}
#charset "UTF-8";
/* CSS Document */
html
{
position: relative;
min-height: 100%;
font-family: Gotham-Light;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
/* Def. Navigation Bar */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #dedee1;
}
li {
float: left;
}
li a, .dropbtn {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
.dropbtn i { float: left; }
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="assets/css-styles/styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>navigation</title>
</head>
<body>
<!-- NAVIGATION -->
<nav>
<ul>
<li>Page1</li>
<li>Page2</li>
<li style="float:right" class="dropdown">
<a class="dropbtn" onclick="dropdownClick()"><i class="material-icons">face</i>Username</a>
<div class="dropdown-content" id="myDropdown">
<i class="material-icons">settings</i> preferències
<i class="material-icons">lock</i> canviar password
<i class="material-icons">power_settings_new</i> log out
</div>
</li>
</ul>
</nav>
</body>
</html>