Develop Reference

How do you make an updatable NavBar?

I have made a Navbar for my website, but I would like to be able to update all of them across my website by editing some code in JS. Please note that I am extremely bad at JS, and I admit that it may not be possible with JavaScript. Here is the code for the HTML.
nav {
list-style-type: none;
background-color: lightblue;
border: 1px solid black;
width: fit-content;
height: min-content;
position: fixed;
}
nav li {
float: left;
}
nav img {
height: 47px;
display: block;
margin-left: auto;
margin-right: auto;
}
nav li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: -apple-system;
background-color: lightblue;
}
nav li a:hover {
background-color: blue;
color: white;
}
nav .nohover:hover {
color: white;
}
<nav class="container">
<li><img src="image" class="navimg"></li>
<li>website1</li>
<li>website2</li>
<li>website3</li>
</nav>
The information will be very helpful. If you know how to do it, please tell me.

To me it is not very clear what you want, but if you want to change the link you can use this. I also gave the a tags a class so I can call them with the JQuery code!
EDIT:
We are a community who helps you solve your coding problems, not write the entire code for you. So please keep that in mind for your next question on StackOverflow.
EDIT 2: I kept the css code out because it is irrelevant.
$(document).ready(function() {
$('.link1').parent().html('<a class="link1" href="changed1">changed1</a>');
$('.link2').parent().html('<a class="link2" href="changed2">changed2</a>');
$('.link3').parent().html('<a class="link3" href="changed3">changed3</a>');
// if you want to add a new item to the end
$('li:last').append('<li><a class="link4" href="changed4">changed4</a></li>')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="container">
<li><img src="image" class="navimg"></li>
<li><a class="link1" href="website1">website1</a></li>
<li><a class="link2" href="webite2">website2</a></li>
<li><a class="link3" href="website3">website3</a></li>
</nav>

Remove the HTML part and add the following code in your js file . All you have to do is to edit the menuArray. Just populate as much as you want.
var menuArray = ['website1', 'website2', 'website3']
var navdiv = document.createElement("div");
navdiv.setAttribute('class', 'container')
var ul = document.createElement("ul");
menuArray.forEach((ele) => {
var li = document.createElement("li");
li.innerHTML = ele
ul.appendChild(li)
})
navdiv.appendChild(ul)
document.body.prepend(navdiv);

JS dropdown menu best practice

I want to implement the following tiny drop down menu into my project.
Is there anything inherently wrong with my code? I attempted the :hover pseudo via CSS but was unsuccessful. Is there a better way to JS this thing?
document.querySelector('.dropbtn').addEventListener('mouseenter', function(){
document.querySelector('.dropdown-content').style.visibility = 'visible'
})
document.querySelector('.dropbtn').addEventListener('mouseleave', function(){
document.querySelector('.dropdown-content').style.visibility = 'hidden'
})
.dropdown {
display: flex;
align-items: flex-start;
}
.dropbtn {
background-color: darkslategray;
color: white;
padding: 6px 10px 6px;
font-size: 18px;
border: none;
cursor: pointer;
}
.dropdown-content {
background-color: darkslategray;
display: inline-grid;
visibility: hidden;
padding: 6px 10px 6px;
}
img {
margin: 3px;
height: 40px;
width: 120px;
border: 1px solid gray;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt="">
<img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt="">
<img src="http://www.publicdomainpictures.net/pictures/50000/velka/blurred-background-green.jpg" alt="">
</div>
</div>
Codepen: https://codepen.io/HelleFl/pen/KyWYYX

Although there are several posts describing how to create a dropdown menu using just HTML and CSS, I'll try to answer your question.
tl;dr: Use CSS over JS for better performance
CSS or JS? Which one is better?
Basically whenever possible, use CSS over JS. There is a great SO answer about this here.
Going further, CSS animations should be preferred over JS animations unless the animation should have some advanced effects. There is a good google developers blog post on this as well.
How to create a dropdown menu
You can find the answer here. Basically you need to set the :hover onto the parent element, that holds both the link and submenu.
li img {
width: 120px;
height: auto;
}
ul > li {
display: inline;
position: relative;
min-width: 150px;
}
/* hide submenus by setting the max-height to 0 */
ul > li > ul {
max-height: 0;
overflow: hidden;
transition: max-height .75s ease;
}
/* set max-height to an approximate height it could have */
ul > li:hover > ul {
max-height: 300px;
}
ul.submenu {
background: #eee;
position: absolute;
left: 0;
top: 1em;
}
ul.submenu > li {
display: block;
}
<nav>
<ul>
<li>Hyperlink 1</li>
<li>
Hyperlink 2
<ul class="submenu">
<li><img src="http://fullhdpictures.com/wp-content/uploads/2016/03/Blur-Backgrounds.jpg" alt=""></li>
<li><img src="http://akveo.com/blur-admin/assets/img/blur-bg-blurred.jpg" alt=""></li>
<li><img src="http://www.publicdomainpictures.net/pictures/50000/velka/blurred-background-green.jpg" alt=""></li>
</ul>
</li>
</ul>
</nav>

I guess you was facing the same issue that I was facing when I checked your codepen, since the .dropbtn are in the same level as .dropdown-content, the selector .dropbtn:hover .dropdown-content wont work since its searching for a child inside .dropbtn, so you have to use the sibling selector:
.dropbtn:hover ~ .dropdown-content{
visibility: visible
}
(CSS animation its better than Javascript)
Also, a good practice in Javascript is to save the DOM element into an variable if you will use it multiple times, so you dont have to search for the DOM element again:
var dropBtnDOM = document.querySelector('.dropbtn');
var dropdownContentDom = document.querySelector('.dropdown-content');
dropBtnDOM.addEventListener('mouseenter', function(){
dropdownContentDom.style.visibility = 'visible'
})
dropBtnDOM.addEventListener('mouseleave', function(){
dropdownContentDom.style.visibility = 'hidden'
})

.dropdown:hover .dropbtn ~ .dropdown-content{
visibility: visible
}

How to display a list of links as a drop down select?

I want to display a list of links like a drop down select, without losing the semantic if possible. Here's what I tried. The CSS obviously does not work now. For the select I emulated the link a bit with location.href in the JavaScript but it loses semantic value, and accessibility I guess.
Without jQuery and Bootstrap,
How to display a list of links as a drop down select ?
document.getElementById("0").addEventListener("change", function (event) {
location.href = event.target.value;
});
.like-select {
appearance: select;
}
<p>Semantic wanted</p>
<ul class="like-select">
<li>Wikipedia</li>
<li>Stack Overflow</li>
<li>Echo Js</li>
</ul>
<p>Look and feel wanted especially on mobile</p>
<select id="0">
<option value="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</option>
<option value="https://stackoverflow.com">Stack Overflow</option>
<option value="http://www.echojs.com/">Echo Js</option>
</select>

The WAI provides multiple examples of emulated listbox using role=listbox and role=option. This requires the use of aria-activedescendant and aria-selected for better accessibility support.
See Examples under section: 3.13 Listbox
For the styling, you can copy the style used by the user agent stylesheet.
That being said, it might a bad idea to style a list of links as a dropdown select as it could lead to an unpredictable change of context

I think you are looking for something like this?Without using Jquery and Bootstrap solution
Dropdown for Url
HTML
<div class="dropdown">
Select URL...
<div class="dropdown-content">
<ul class="like-select">
<li>Wikipedia</li>
<li>Stack Overflow</li>
<li>Echo Js</li>
</ul>
</div>
</div>
CSS
.dropdown {
position: relative;
display: inline-block;
padding: 10px;
width:160px;
border: 1px solid;
}
.dropdown:after{
content: '\25BC';
position: relative;
font-size:14px;
float:right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: inherit;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
top: 39px;
left: 0;
width: 100%;
z-index: 1;
}
li a{
text-decoration:none;
color: black;
padding:10px;
}
ul{
padding:0;
margin:0;
}
li{
list-style: none;
padding:10px;
border-bottom:1px solid black;
}
li:hover{
background-color:gray;
}
li:hover a{
color:white;
}
JS
var dropdown = document.getElementsByClassName("dropdown");
var attribute;
var myFunction = function() {
attribute = this.getAttribute("data-target");
var x = document.getElementById(attribute);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener('click', myFunction, false);
}
Working Fiddle

<option> does not take nested HTML elements.
What you have to do is style your <ul> <li> and make it look and feel like a native drop down.
Here is a working example:
https://codepen.io/anon/pen/boxKRz

I made this sample only using CSS, hope this will help u
HTML:
<ul>
<li id="box">Hover Me
<ul>
<li class="dropdown_item">111</li>
<li class="dropdown_item">222</li>
</ul>
</li>
</ul>
CSS:
ul, li {
list-style-type: none;
margin: 0;
padding:0;
height:30px;
line-height: 30px;
width: 100px;
}
#box {
border: 1px solid #bbb;
display: inline-block;
cursor:default;
}
ul li ul {
display: none;
position: absolute;
top: 40px; /* change this value based on your browser */
left: 10px;
}
ul li:hover>ul:last-child {
display: block;
width: 100px;
}
ul li ul li:hover {
background-color:rgb(33,144,255);
color:white;
border: 1px solid #bbb;
}
Link:
https://codepen.io/zsydyc/pen/VMGGPv

ALL SOLUTION WITH JUST CSS AND HOVER ARE WORKING COMPLETLY WELL ON MOBILE!!! That comments that there is no hover on mobile are not quite right... The hover states are mapped to a finger tap and working on every mobile OS in every brwoser! Normally the default behaviour already does the trick, in some cases you can make it more usable with some JS...
If you want a dropdown just with css and NO hover here comes an other solution realized with a checkbox: (just google "css checkbox hack" for further information)
.checkhack {
display: none;
}
#menu {
display: none;
}
#menutoggle:checked + #menu {
display: block;
}
<label for="menutoggle" class="checklabel">OPEN MENU</label>
<input id="menutoggle" class="checkhack" type="checkbox" />
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>

quick way of making a combobox without using ID selector and keeping the HTML as above
link:https://codepen.io/gabep/pen/KXJoEK
first the CSS them the JS
fist I style the UL :
.like-select {
height:21px;
overflow:hidden;
width:8%;
}
.like-select li{
appearance: select;
color:red;
border-left: 1px solid blue;
border-right: 1px solid blue;
list-style-type: none;
}
make the first child your box :
.like-select li:first-child {
border: 1px solid blue;
}
make the last child the bottom part of dropdown:
.like-select li:last-child {
border-bottom: 1px solid blue;
}
give the list item a hover effect :
.like-select li a:hover {
background-color: green !important;
}
.like-select li:first-child a:hover{
background-color: none !important;
}
a {
color:blue;
text-decoration:none;
width:100%;
}
now the Js:
function load() {
//add the main item to your list you need to have it in your drop-down:
// use querySelectorAll to find specific elements of any type and put in a list
var addfirst= document.querySelectorAll(".like-select li:first-child");
var ullist = document.querySelectorAll(".like-select");
ullist[0].innerHTML = addfirst[0].outerHTML + ullist[0].innerHTML ;
y = document.querySelectorAll(".like-select li");
// do an onlick here instead of mouse over
y[0].onmouseenter = function(){
//resize wrapper event - im not going to do a toggle because you get the idea
var comboboxwrapper = document.querySelectorAll(".like-select");
comboboxwrapper[0].style.height = "100px";
}
// loop though all other items except first-child
var i;
for (i = 1; i < y.length; i++) {
y[i].onmouseover = function(){
var selecteditem =document.querySelectorAll(".like-select li");
//change the value in the combobox with the value hovered over
var mainitem = document.querySelectorAll(".like-select li:first-child");
mainitem[0].innerHTML = this.innerHTML;
};
} }
window.onload = load;

jQuery - change css of links as they move to far left of nav menu on click

This is my first time asking anything but I'm stuck and I hope i explain clearly what I'm trying.
I have a nav menu that if a link is clicked it (that choice) moves to the far left spot of the menu. Whatever menu option is clicked and in the far left spot i just want the font larger and the color Orange. The next option that clicked needs to go in the left spot and have its font larger and color Orange while the other options go back to small and white.
I'd also like the remaining menu options to stay in the same order that they start in if they are not the choice in that far left spot. I want my sub-menu's to eventually look and work the same way.
Here is my code:
HTML:
<div>
<ul id="main-top">
<li id="blank"><a href="#" ></a></li>
<li>Projects</li>
<li>Services</li>
<li>Contact</li>
<li>Sign-in</li>
</ul>
</div>
CSS:
body {
background: black;
color: white;
}
#main-top {
position: absolute;
top: 75px;
border-top: 1px solid #ffffff;
width: 850px;
}
#main-top li{
display: inline;
list-style-type:none;
padding-right: 20px;
padding-bottom: 16px;
border-right: 1px solid #ffffff;
height: 50px;
}
a {
color: white;
font-size: 1em;
padding: 10px 75px 5px 3px;
text-decoration: none;
list-style-type: none;
}
a:hover{
color: #FF4500;
}
jQuery:
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$('#blank').hide();
});
demo: http://jsfiddle.net/CLTZs/
I've tried just adding a function to alter the css of the first-child, but it targets that blank spot and not what goes into it.

You could addClass within your function
DEMO http://jsfiddle.net/CLTZs/1/
jQuery
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$this.addClass('firstOpt');
$('#blank').hide();
});
CSS
#main-top li.firstOpt a {
color: #FF4500;
font-size: 25px;
font-weight: bold;
}

Just so i don't leave this question out there not fully answered - I was able to get the desired effect by using your suggestion #Vector and adding a little bit to get the li's back to original look:
$('li').click(function() {
var $this = $(this);
$this.insertBefore($this.siblings(':eq(0)'));
$this.toggleClass('active');
$this.siblings().removeClass("active");
$('#blank').hide();
});
and adding the class "active" to my CSS:
.active a{
color: #FF4500;
font-size: 25px;
font-weight: bold;
margin: 0;
}
Since i have other jquery toggles going on with those menu options, I was able to insert that jquery right into my existing function and it work fine. For some reason it throws off my spacing on the rest of the list, but I'll have to figure that out in my css files.
fiddle: http://jsfiddle.net/CLTZs/2/

how to change button icon on click?

I have this button, who have a icon (picture). Now, I want to do is on a click on a button icon (picture) will change to another icon and when you click again it will jump back on old icon. (like toggle principle).
Here is my button CSS code:
.w8-button {
display: table;
padding: 7px 15px 8px 15px;
border: none;
font-family: "open_sans_lightregular";
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 0.9;
}
and here is CSS icon code:
.w8-button.iconize {
padding-right: 50px !important;
background: url(D:/firstPicture.png) no-repeat 115px center;
}
And this is how I call my button in html:
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button"/>
</li>
Can somebody tell me how to do code in javascript, that when I click on button, icon (background picture) will change and stay like that, until you click again will go back to old one (like toggle system)

On a a modern browser that supports addEventListener and the Class List API (shims are available for both on their respective MDN pages to add support for older broswers), you could do this.
CSS
.w8-button {
display: table;
padding: 7px 15px 8px 15px;
border: none;
font-family:"open_sans_lightregular";
font-size: 13px;
font-weight: bold;
cursor: pointer;
opacity: 0.9;
}
.w8-button.iconize {
padding-right: 50px !important;
background: url("http://imageshack.us/a/img856/3817/ticklf.png") no-repeat 5px center;
}
.w8-button.iconize2 {
padding-right: 50px !important;
background: url("http://imageshack.us/a/img822/1917/crossn.png") no-repeat 5px center;
}
HTML
<li>
<input type="submit" id="w8-d-blue" name="w8-d-blue" class="w8-button iconize" value="Button" />
</li>
Javascript
document.getElementById("w8-d-blue").addEventListener("click", function (e) {
var target = e.target;
target.classList.toggle("iconize");
target.classList.toggle("iconize2");
}, false);
On jsfiddle

Here is how you can do this in jquery
$(function(){
$("#w8-d-blue").click(function(){
$(this).toggleClass("iconize");
return true;
});
});
To use jquery you'll have to add this to the head section of your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
and type the above code afterwards.

Quick solution
var switch = 0, element = document.getElementById("w8-d-blue"), img1, img2;
element.onclick = function(){
if (switch == 0){
element.style.backgroundImage(img1);
switch = 1;
}
else {
element.style.backgroundImage(img2);
switch = 0
}
I think you are unaware of the wonders Jquery can bring you. If so you should really look it up, it makes many things like that much easier.