Draw arrow between two flex items

Draw arrow between two flex items - javascript

I want the arrow to be inserted between two flex items as they are added(Please run the code). It must be added after the first flex item for every added flex item between them so that they appear connected by the arrow. The arrow must be at the midpoint of box boundaries ( not box centre) connecting them.
$('#clickMe').click(function() {
$('#Demosss').append($('<li class="flex-item">').text('text'))
$(this).insertAfter($('[class^="flex-item"]').last());
});
$(document).on('click', '.flex-item' ,function(){
$(this).toggleClass('flexActive')
})
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: green;
padding: 5px;
width: 100px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
.flexActive{
width:auto;
display:block;
flex: 1 1;
margin-right:0;
}
ul li{
display: inline;
}
.enlarge{
zoom: 350%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
<div class="enlarge">
<span>⇢</span>
</div>

You can use a pseudo element with the arrow as content, and to exclude it from the first element, use :not() in your CSS.
$('#clickMe').click(function() {
$('#Demosss').append($('<li class="flex-item">').text('text'))
$(this).insertAfter($('[class^="flex-item"]').last());
});
$(document).on('click', '.flex-item' ,function(){
$(this).toggleClass('flexActive')
})
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row;
/* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: green;
padding: 5px;
width: 100px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
position: relative;
}
.flexActive {
width: auto;
display: block;
flex: 1 1;
margin-right: 0;
}
ul li {
display: inline;
}
.flex-item:not(:first-child) {
margin-left: .75em;
}
.flex-item:not(:first-child):before {
content: '\21E2';
color: black;
position: absolute;
top: 50%;
left: 0;
transform: translate(-100%, -50%);
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container"></ul>
<button id="clickMe">Click Me</button>

Remove the horizontal margins between your block elements, and then conditionally append the arrow before each inserted block when you detect that at least one block has already been added.
var first = true
$('#clickMe').click(function() {
var demos = $('#Demosss')
if (!first) {
demos.append('⇢')
} else first = false
demos.append($('<li class="flex-item">').text('text'))
$(this).insertAfter($('.flex-item').last());
});
$(document).on('click', '.flex-item', function (){
$(this).toggleClass('flexActive')
})
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: green;
padding: 5px;
width: 100px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
.flexActive{
width:auto;
display:block;
flex: 1 1;
margin-right:0;
}
ul li{
display: inline;
}
.enlarge{
zoom: 350%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
<div class="enlarge">
</div>

Try to something like this.
$('#clickMe').click(function() {
$('#Demosss').append($('<li class="flex-item">').text('text'))
$('.enlarge').css('display','none');
$('#Demosss').append($('<div class="enlarge1"><span>⇢</span></div>'))
$(this).insertAfter($('[class^="flex-item"]').last());
});
$(document).on('click', '.flex-item' ,function(){
$(this).toggleClass('flexActive')
})
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: green;
padding: 5px;
width: 100px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
.flexActive{
width:auto;
display:block;
flex: 1 1;
margin-right:0;
}
ul li{
display: inline;
}
.enlarge1{
zoom: 350%;
}
.enlarge{
zoom: 350%;
}
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
<div class="enlarge"><span>⇢</span></div>
<div class="arrow">
</div>

Related

Visually replace div when clicking outside

function replace( hide, show ) {
document.getElementById(hide).style.display="none";
document.getElementById(show).style.display="flex";
}
#import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Bebas+Neue&family=Inter:wght#100;200;300;400;600;700;800&family=Roboto:wght#300;400;700&family=VT323&display=swap');
body {
margin: 0;
padding: 0;
}
.all_guidebook {
width: 100%;
position: absolute;
min-height: 1000px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.title_guidebook {
position: relative;
top: 50px;
justify-content: center;
}
.disposition_guidebook {
width: 1100px;
display: flex;
position: relative;
align-items: flex-start;
top: 55px;
}
.navigation {
width: 286px;
background: var(--bleu);
position: relative;
height: auto;
padding-bottom: 30px;
border-radius: 35px;
margin-right: 15px;
}
.navigation .all_links {
position: relative;
top: 15px;
}
.navigation h1 {
color: white;
font: 45px 'Bebas Neue';
margin: 0;
text-align: center;
position: relative;
top: 15px;
}
.navigation h2 {
color: white;
font: 34px 'Bebas Neue';
position: relative;
background: var(--fushia);
display: flex;
border-radius: 15px;
height: 45px;
padding-top: 2px;
margin-bottom: 26px !important;
width: 247px;
box-sizing: border-box;
top: 20px;
margin: auto;
justify-content: center;
}
.navigation .menu_deroul, #regl {
display: flex;
background: blue;
width: 300px;
}
#reglhover {
display: flex;
background: blue;
width: 300px;
}
#reglhover img, #staffcredshover img, #ctxhover img, #grphover img, #pvrhover img, #syst1hover img, #syst2hover img, #pihover img, #exphover img, #foirehover img {
transform: rotate(135deg);
top: 5px;
position: relative;
left: 7px;
}
.navigation .menu_deroul img {
float: left;
left: 7px;
position: relative;
cursor: pointer;
}
.navigation span {
color: var(--fushiapp);
margin-right: 3px;
font: 20px 'Bebas Neue';
}
.navigation h3 {
color: var(--white);
font: 20px 'Bebas Neue';
}
.wrap_deroul {
display: flex;
flex-direction: column;
position: relative;
top: -18px;
align-items: flex-end;
}
.ancres_deroul {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-end;
height: 30px;
padding: 0;
color: white;
top: -16px;
font-weight: 200!important;
right: 16px;
font: 16px 'Bebas Neue';
position: relative;
}
.ancres_deroul ul {
margin: 0;
display: flex;
cursor: pointer;
list-style: none;
align-items: flex-end;
flex-direction: column;
}
.ancres_deroul li {transition: .5s;}
.ancres_deroul li a {
text-decoration: none!important;
color: black;
}
.ancres_deroul li:hover {
letter-spacing: .5px;
transition: .5s;
}
<div class="menu_deroul" id="regl" style="display:flex" >
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" onclick="replace('regl','reglhover')" />
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')" id="defaultOpen">Règlement</h3>
</div>
</div>
<div id="reglhover" style="display:none">
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" style="cursor:pointer; transform: rotate(135deg); transition: .5s; transition-duration: 2s;" onclick="replace('reglhover','regl')" />
<div class="wrap_deroul">
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')">Règlement</h3>
</div>
<div class="ancres_deroul">
<ul>
<li><a onclick="scrollWin()">Inscription & RP</a></li>
<li style="margin-top: -5px;">Discord</li>
</ul>
</div>
</div>
</div>
I have this code, it replaces a div by another when clicking on a button.
I want it to close the showed div when clicking outside the div. For example, if the div "reglhover" is showed, I want it to be replaced by the "hide" status (replaced by "regl") when clicking outside the "reglhover" div. And i want it to work for every occurrence (because i use tabs)... But I can't figure out how to do it. Can someone help me? :(

try
const regl = document.getElementById("regl")
const reglhover = document.getElementById("reglhover")
document.addEventListener("click", (e) => {
if (reglhover.style.display === "flex" && e.target.id != "reglhover") {
reglhover.style.display = "none"
regl.style.display = "flex"
}
})

Open <li> tag of footer upward on toggle during mobile view (no added css framework)

I made my own responsive footer without any css framework but on mobile view it becomes toggle.
The problem is when i toggle the button it toggles downward, not upward. Thank you.
Please check the code snippet if how do I deal on toggling upward.
If you guys think there is more appropriate and good approach to make good responsive footer, it would gladly be much appreciated.
But in this case, I am just missing something. Thank you
$(document).ready(function() {
$(".footer-toggle-btn").click(function() {
if ($(this).text() == "☰") {
$(this).text("✖");
$('.footer-container').css('display', 'block');
} else {
$(this).text("☰");
$('.footer-container').css('display', 'block');
}
$("#footer li").toggle("slow");
});
});
.footer-container {
max-width: 1200px;
width: 90%;
padding: 0px 5%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
}
.footer-container li {
list-style-type: none;
}
.footer-container a {
text-decoration: none;
color: white;
}
.footer-container ul {
width: 65%;
display: block;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
nav {
width: 100vw;
}
.footer-toggle-btn {
display: none;
background-color: black;
color: white;
padding: 5px 0px;
height: auto;
width: 50px;
font-size: 23px;
border: 3px solid black;
cursor: pointer;
}
.footer-toggle-btn:hover {
background-color: black;
color: #f39700;
}
#media only screen and (max-width: 700px) {
#footer {
height: auto !important;
}
.footer-container {
display: block;
flex-direction: column;
width: 100%;
padding: 0;
}
.footer-container ul {
flex-direction: column;
align-items: flex-start;
width: 100%;
}
.footer-container a {
display: block;
padding-left: 15px;
}
.footer-container li {
margin: 0;
width: 100%;
height: 50px;
line-height: 50px;
}
.footer-container li:hover {
background-color: #f39700;
}
.footer-container li:hover a {
color: black;
font-weight: bold;
}
.footer-toggle-btn {
display: block;
}
}
#footer {
background-color: black;
height: 100px;
display: flex;
justify-content: space-between;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="footer">
<footer class="footer-container">
<ul class="feed-list">
<li>TEST 1</li>
<li>TEST 2</li>
<li>TEST 3</li>
<li>TEST 4</li>
<li>TEST 5</li>
<button class="footer-toggle-btn">✖</button>
</ul>
</footer>
</section>

windows.onclick keeps clicking automatically

const toggle = document.getElementById('toggle');
window.onclick = function (event) {
if (event.target == toggle) {
toggle.checked = false;
}
};
.navbar {
background-color: #5f686d;
display: flex;
justify-content: flex-end;
position: fixed;
width: 100vw;
z-index: 2;
top: 0;
}
.navbar .desktop {
list-style-type: none;
padding: 0;
display: flex;
margin-left: auto;
margin-top: 10px;
margin-right: 1rem;
margin-bottom: 10px;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
text-transform: capitalize;
}
#logo {
width: 150px;
height: 50px;
margin-top: 15px;
margin-right: 30vw;
margin-left: 2vw;
}
.navbar li img{
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
padding: 0px;
}
/* Dropdown Button */
.dropbtn {
background-color: #5f686d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* 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: #f1f1f1;
min-width: 160px;
border: 1px solid #95bbdf;
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: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
.navbar ul li i{
font-size: 2rem;
margin-right: 2rem;
}
.navbar ul li div{
padding: 0px !important;
}
.navbar .fa-sort-down{
font-size: 1.5rem;
color: whitesmoke;
}
.navbar ul li ,
.navbar ul li div{
padding: 10px;
color: whitesmoke;
margin: auto;
cursor: pointer;
}
.navbar ul li div:hover{
border: none;
text-decoration: none;
}
.navbar ul li a {
text-decoration: none;
color: white;
border-bottom: 2px solid transparent;
}
.navbar ul li a:hover {
color: #ea4c88;
transition: 200ms ease;
}
.navbar label {
font-size: 40px;
color: whitesmoke;
line-height: 70px;
display: flex;
flex-direction: row;
display: none;
justify-content: flex-end;
}
.navbar #toggle {
display: none;
}
ol {
display: none !important;
background-color: rgb(255, 255, 255);
border: 1px solid black;
border-top: none;
}
ol a{
color: black;
}
ol li:hover a{
color: white;
}
ol li:hover{
background-color: rgb(107, 103, 103);
}
/*navbar media*/
#media screen and (max-width: 1031px) {
.navbar {
align-items: center;
justify-content: center;
}
.navbar ul {
margin-right: auto;
margin-left: auto;
justify-content: space-between;
}
#logo {
margin: auto;
padding-left: 1.5rem;
}
.prof_name{
display: none;
}
}
#media screen and (max-width: 630px) {
.navbar {
flex-direction: column !important;
align-items: center;
justify-content: center;
}
.navbar {
align-items: flex-start;
justify-content: flex-start;
}
#logo {
margin: 0.5rem;
}
.navbar .desktop{
display: none !important;
}
.navbar ol {
flex-direction: column;
width: 100%;
justify-content: flex-start;
}
.navbar ol li {
display: flex;
justify-content: center;
font-size: 1.3em;
margin: 0;
}
.navbar label {
align-self: flex-end;
margin-right: 10px;
display: flex;
cursor: pointer;
color: white;
width: 40px;
position: fixed;
}
#toggle[type=checkbox]:checked ~ ol {
display: block !important;
}
.prof_name{
display: none;
}
}
<nav class="navbar">
<img id="logo"src="../assets/images/logo.png" alt="logo">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
<ul class="desktop">
<li> <i class="fas fa-home" title="Home"></i></li>
<li onclick="toggleDropdown()">
<img src="../assets/images/avatar-1577909__340.png" alt="img_you">
</li>
<div class="dropdown">
<button class="dropbtn">Ayo Alesh |ADMIN. <i class="fas fa-sort-down"></i></button>
<div class="dropdown-content">
Create User
Log out
User
Staff
</div>
</div>
</ul>
<ol>
<li>
Home
</li>
<li>Create User</li>
<li> Log out</li>
<li>User</li>
<li> Staff</li>
</ol>
</nav
I'm using a checkbox to show and hide hamburger navbar on mobile view. I'm trying to make sure that when ever a user clicks anywhere on the screen when the navbar is opened, the checkbox should get checked and navbar should hide. But instead the navbar won't even open,I found out windows.onclick triggers immediately i try to open the navbar.

Try document instead of window. There wasn't any code to hide .navbar and the use of event.target doesn't look like it was needed. event.target references the element that the user clicked which in this situation can be considered anything.
document.onclick = function(event) {
const tog = document.getElementById('toggle');
const nav = document.querySelector('.navbar');
tog.checked = true;
nav.style.display = 'none';
};
.navbar {
background-color: #5f686d;
display: flex;
justify-content: flex-end;
position: fixed;
width: 100vw;
z-index: 2;
top: 0;
}
.navbar .desktop {
list-style-type: none;
padding: 0;
display: flex;
margin-left: auto;
margin-top: 10px;
margin-right: 1rem;
margin-bottom: 10px;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
text-transform: capitalize;
}
#logo {
width: 150px;
height: 50px;
margin-top: 15px;
margin-right: 30vw;
margin-left: 2vw;
}
.navbar li img {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
padding: 0px;
}
/* Dropdown Button */
.dropbtn {
background-color: #5f686d;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* 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: #f1f1f1;
min-width: 160px;
border: 1px solid #95bbdf;
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: #ddd;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.navbar ul li i {
font-size: 2rem;
margin-right: 2rem;
}
.navbar ul li div {
padding: 0px !important;
}
.navbar .fa-sort-down {
font-size: 1.5rem;
color: whitesmoke;
}
.navbar ul li,
.navbar ul li div {
padding: 10px;
color: whitesmoke;
margin: auto;
cursor: pointer;
}
.navbar ul li div:hover {
border: none;
text-decoration: none;
}
.navbar ul li a {
text-decoration: none;
color: white;
border-bottom: 2px solid transparent;
}
.navbar ul li a:hover {
color: #ea4c88;
transition: 200ms ease;
}
.navbar label {
font-size: 40px;
color: whitesmoke;
line-height: 70px;
display: flex;
flex-direction: row;
display: none;
justify-content: flex-end;
}
.navbar #toggle {
display: none;
}
ol {
display: none !important;
background-color: rgb(255, 255, 255);
border: 1px solid black;
border-top: none;
}
ol a {
color: black;
}
ol li:hover a {
color: white;
}
ol li:hover {
background-color: rgb(107, 103, 103);
}
/*navbar media*/
#media screen and (max-width: 1031px) {
.navbar {
align-items: center;
justify-content: center;
}
.navbar ul {
margin-right: auto;
margin-left: auto;
justify-content: space-between;
}
#logo {
margin: auto;
padding-left: 1.5rem;
}
.prof_name {
display: none;
}
}
#media screen and (max-width: 630px) {
.navbar {
flex-direction: column !important;
align-items: center;
justify-content: center;
}
.navbar {
align-items: flex-start;
justify-content: flex-start;
}
#logo {
margin: 0.5rem;
}
.navbar .desktop {
display: none !important;
}
.navbar ol {
flex-direction: column;
width: 100%;
justify-content: flex-start;
}
.navbar ol li {
display: flex;
justify-content: center;
font-size: 1.3em;
margin: 0;
}
.navbar label {
align-self: flex-end;
margin-right: 10px;
display: flex;
cursor: pointer;
color: white;
width: 40px;
position: fixed;
}
#toggle[type=checkbox]:checked~ol {
display: block !important;
}
.prof_name {
display: none;
}
}
<nav class="navbar">
<img id="logo" src="../assets/images/logo.png" alt="logo">
<label for="toggle"> ☰ </label>
<input type="checkbox" id="toggle">
<ul class="desktop">
<li>
<i class="fas fa-home" title="Home"></i>
</li>
<li onclick="toggleDropdown()">
<img src="../assets/images/avatar-1577909__340.png" alt="img_you">
</li>
<div class="dropdown">
<button class="dropbtn">Ayo Alesh |ADMIN. <i class="fas fa-sort-down"></i></button>
<div class="dropdown-content">
Create User
Log out
User
Staff
</div>
</div>
</ul>
<ol>
<li>
Home
</li>
<li>Create User</li>
<li> Log out</li>
<li>User</li>
<li> Staff</li>
</ol>
</nav>

Responsive Navigation - flexbox dropdowns causing overflow

Currently doing a quick website. Got navigation styled and working correctly, however I implemented a drop down as a nav item. This causes three problems I can't quite seem to fix:
On the navigation toggle, content overlaps with each other.
On the nav toggle, the navigation makes you scroll, even through there
is room to expand the dropdown on desktop screens the hover.
On desktop screens the nav item causes the drop to happen within the header with a scroll bar.
Been stuck on this for a while any assistance would be appreciated.
function NavToggle() {
var tn = document.getElementById("nav-bar")
if (tn.style.display === "none") {
tn.style.display = "block";
} else {
tn.style.display = "none";
}
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html,
body {
overflow-y: auto;
}
ul {
margin: 0;
padding: 0;
}
/* Header and Navigation */
header {
width: 100vw;
height: auto;
background-color: #222;
position: fixed;
z-index: 1;
overflow-y: auto;
max-height: 100vh;
overflow-x: hidden;
}
nav {
display: none;
z-index: 2;
}
.title-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100vw;
padding: 0 10px;
}
/* menu base styles */
nav ul {
list-style-type: none;
}
nav li {
height: 50px;
}
.title-wrapper>a {
font-size: 16px;
}
a {
color: #999;
}
nav a {
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
font-size: 14px;
padding-left: 10px;
}
nav a:hover {
color: #fff;
}
/* Menu Toggle Styling */
.menu-toggle {
font-size: 26px;
color: #fff;
cursor: pointer;
padding: 0 15px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle-button {
padding: inherit;
}
#media screen and (min-width: 930px) {
nav ul {
display: flex;
}
/* Header Content */
.header-container {
display: flex;
justify-content: center;
align-items: center;
}
.menu-toggle {
display: none;
}
.header-wrapper {
max-width: 1200px;
width: 100%;
display: flex;
justify-content: center;
padding: 0 20px;
}
.header-title {
font-size: 18px;
}
#nav-bar {
width: 70%;
display: inline-flex;
justify-content: space-between;
}
a {
padding: 0 1rem;
}
.nav-dropdown {
position: relative;
}
.nav-dropdown-menu {
display: none;
position: absolute;
z-index: 2;
}
.nav-dropdown:hover>.nav-dropdown-menu {
display: block;
}
}
<body>
<header class="nav-wrapper header-container">
<div class="header-wrapper">
<div class="title-wrapper">
<a>Chemical Finger Print Analysis</a>
<div class="menu-toggle">
<span id="menu-toggle-button" onclick="NavToggle()">☰</span>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li class="nav-dropdown">Account
<ul class="nav-dropdown-menu">
<li>Account</li>
<li>Order History</li>
<li>Wishlist</li>
</ul>
</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
</body>

To fix the first two issues, you have to set the display of .nav-dropdown to inline-block:
.nav-dropdown {
display: inline-block;
}
To fix the third issue, you have to set the overflow of the header to visible, since you have set it to auto which generates scroll bars if the content overflows.
.header-container {
overflow: visible;
}
This is a working example (without fixing any other issues):
function NavToggle() {
var tn = document.getElementById("nav-bar")
if (tn.style.display === "none") {
tn.style.display = "block";
} else {
tn.style.display = "none";
}
}
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html,
body {
overflow-y: auto;
}
ul {
margin: 0;
padding: 0;
}
/* Header and Navigation */
header {
width: 100vw;
height: auto;
background-color: #222;
position: fixed;
z-index: 1;
overflow-y: auto;
max-height: 100vh;
overflow-x: hidden;
}
nav {
display: none;
z-index: 2;
}
.title-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
width: 100vw;
padding: 0 10px;
}
/* menu base styles */
nav ul {
list-style-type: none;
}
nav li {
height: 50px;
}
.title-wrapper>a {
font-size: 16px;
}
a {
color: #999;
}
nav a {
text-decoration: none;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
font-size: 14px;
padding-left: 10px;
}
nav a:hover {
color: #fff;
}
/* Menu Toggle Styling */
.menu-toggle {
font-size: 26px;
color: #fff;
cursor: pointer;
padding: 0 15px 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.menu-toggle-button {
padding: inherit;
}
.nav-dropdown {
display: inline-block;
margin-bottom: 150px;
}
#media screen and (min-width: 930px) {
nav ul {
display: flex;
background-color: #222;
}
/* Header Content */
.header-container {
display: flex;
justify-content: center;
align-items: center;
overflow: visible;
}
.menu-toggle {
display: none;
}
.header-wrapper {
max-width: 1200px;
width: 100%;
display: flex;
justify-content: center;
padding: 0 20px;
}
.header-title {
font-size: 18px;
}
#nav-bar {
width: 70%;
display: inline-flex;
justify-content: space-between;
}
a {
padding: 0 1rem;
}
.nav-dropdown {
position: relative;
}
.nav-dropdown-menu {
display: none;
position: absolute;
z-index: 2;
}
.nav-dropdown:hover>.nav-dropdown-menu {
display: block;
}
.nav-dropdown {
margin-bottom: 0;
}
}
<body>
<header class="nav-wrapper header-container">
<div class="header-wrapper">
<div class="title-wrapper">
<a>Chemical Finger Print Analysis</a>
<div class="menu-toggle">
<span id="menu-toggle-button" onclick="NavToggle()">☰</span>
</div>
</div>
<nav id="nav-bar">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li class="nav-dropdown">Account
<ul class="nav-dropdown-menu">
<li>Account</li>
<li>Order History</li>
<li>Wishlist</li>
</ul>
</li>
<li>Login</li>
</ul>
</nav>
</div>
</header>
</body>
Or see this fiddle.

Items are not getting wrapped on adding more items with flex-wrap property

I want the items added to wrap around and get added to next row and not scroll to right side.
The items wrap to next row if I do not use button to add list items and just add items manually to li. I have used the flex-wrap: wrap property of flex-box.
$('#clickMe').click(function() {
$('#ticketsDemosss').append($('<li class="flex-item">').text('sds'));
});
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
ul li{
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl id="viewbranchcontact-2">
<ul id="ticketsDemosss" class="flex-container">
<!-- add LI here -->
</ul>
</dl>
<button id="clickMe">Click Me</button>

It's because the elements are inline and there is no space between the elements, so it's treated like a long word. You can either...
apply word-break: break-all to the parent
make the li's inline-block instead (what I did below)
put spaces between the elements
$('#clickMe').click(function() {
$('#ticketsDemosss').append($('<li class="flex-item">').text('sds'));
});
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
ul li{
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl id="viewbranchcontact-2">
<ul id="ticketsDemosss" class="flex-container">
<!-- add LI here -->
</ul>
</dl>
<button id="clickMe">Click Me</button>

You need to add display: inline-flex; box-sizing: border-box; .in flex-item class
$('#clickMe').click(function() {
$('#ticketsDemosss').append($('<li class="flex-item">').text('sds'));
});
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-flex;
box-sizing: border-box;
}
ul li{
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl id="viewbranchcontact-2">
<ul id="ticketsDemosss" class="flex-container">
<!-- add LI here -->
</ul>
</dl>
<button id="clickMe">Click Me</button>

Develop Reference

JavaScript is the programming language of the Web.

Draw arrow between two flex items - javascript

Related

Visually replace div when clicking outside

Open <li> tag of footer upward on toggle during mobile view (no added css framework)

windows.onclick keeps clicking automatically

Responsive Navigation - flexbox dropdowns causing overflow

Items are not getting wrapped on adding more items with flex-wrap property

Categories

Resources