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);
Related
I'm about to give up, so I'm rewriting this question one more time. I just can't make it work, I have too much left to learn for this to work out. I really tried my best but I need help.
As you can see on my Codepen I managed to make it work "somehow". But I know the calculation is wrong and can't even think about how it could work when scrolling back up.
https://codepen.io/Nimyr/pen/ZEaWpzb
All I want is a navigation like here:
https://www.lieferando.de/speisekarte/bella-italia-bunde
As you can see the navigation sticks to the top and moves the navigation-element thats fitting the currently active section automatically to the left as you scroll down.
I've set up a WordPress Site where I am trying to make the navigation work just like that. Any ideas? :( I'm really lost.
The usecase for this is pretty simple: I want to make a (especially mobile-)user-friendly page that shows a restaurant's menu.
Please don't hesitate to ask any questions if my explanation is weak, I don't know how to formulate it more precisely.
Thanks in advance!
I will also post the code from the Codepen:
HTML
<body>
<nav>
<div class="nav-test">
<ul class="nav-test2">
<li>About</li>
<li>Team</li>
<li>Gallery</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section class="about">
<h1>About</h1>
</section>
<section class="team">
<h1>Team</h1>
</section>
<section class="gallery">
<h1>Gallery</h1>
</section>
<section class="testimonials">
<h1>Testimonials</h1>
</section>
<section class="contact">
<h1>Contact</h1>
</section>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, serif;
color: #fff;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
text-align: center;
background: #515151;
}
.nav-test {
display: flex;
justify-content: center;
}
nav ul {
width: 500px;
overflow: scroll hidden;
display: flex;
flex-wrap: nowrap;
}
nav ul li {
list-style: none;
display: inline-block;
}
nav ul li a {
display: block;
padding: 20px 40px;
text-decoration: none;
color: #fff;
transition: background-color .4s ease;
}
nav ul li a.active {
background-color: #FF0000;
}
section {
padding: 30% 0;
text-align: center;
}
section.about {
background: #888;
}
section.team {
background: skyblue;
}
section.gallery {
background: #aaa;
}
section.testimonials {
background: orange;
}
section.contact {
background: #ccc;
}
JavaScript (please note that this project also contains highlighting the active navigation element through a change in background color. This is purely optional, I need the automatic scroll. But I started with a Codepen created by Kon Kim as a basic structure to figure the rest out. I failed. gg
(function(){
var navLinks = $('nav ul li a'),
navH = $('nav').height(),
section = $('section'),
documentEl = $(document);
documentEl.on('scroll', function() {
var currentScrollPos = documentEl.scrollTop();
section.each(function(){
var self = $(this);
if ( self.offset().top < (currentScrollPos + navH) && (currentScrollPos + navH) < (self.offset().top + self.outerHeight() ) ) {
var
targetClass = '.' + self.attr('class') + '-marker',
width = $(targetClass).outerWidth();
navLinks.removeClass('active'),
$(targetClass).addClass('active');
if ( $(targetClass).offset().left > $('.nav-test2').offset().left)
{
var
newWidth = $(targetClass).offset().left - $('.nav-test2').offset().left;
$('.nav-test2').animate(
{scrollLeft: newWidth},
{duration: 150}
);
return false;
}
}
});
});
})();
I am having a little difficult creating a navbar that when clicked it opens a small window on the same page like on the image.
Create the small window as it's own div:
<div id="myID"> This content will show when I click the navbar</div>
Add the following CSS:
#myID{
display: none;
}
Then use some script to show/hide the element:
$(document).ready(function(){
// change #nav to whatever the ID of the nav element is.
$('#nav').on('click', function(){
// show/hide pop up on click
$('#myID').toggle();
});
});
You can create a Navbar like this. This is the only dummy. In given image, they have one fix element and when you click on nav element according to that they are updating the content of that element.
$('#myNav').find('li a').click(function (e) {
$('li.active').removeClass('active');
$(this).parent('li').addClass('active');
$('#main').html($(this).html());
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #567;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ccc;
}
.active {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myNav">
<li class="active">Home</li>
<li>Service</li>
</ul>
<div id="main">
Home
</div>
It will help you to create a nav bar.
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
}
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/
This might be the simplest question of the day.
I'm looking for the best answer based on all knowledged across community, not a basic tab effect but one that could be scalable, easy to implement and compliant with standards.
What could be a good and simple (compatible) way to accomplish having different sections with Javascript. I personally prefer jQuery, Mootools or plain Javascript.
When each link is clicked it should open up relationed table row or div, not a hover menu. Section has to stay open after selected on left options.
Any help with resources or direction will be greatly appreciated.
Form will have one common submit button with all selected options.
Or you can use a pre-existing plugin: http://jsfiddle.net/oskar/VELCe/
It is easiest tab code with no jQuery or other plugins.
Add this function under script tag
<script type="text/javascript">
function showTab(tabNumber) {
var tabIDs = ["tab1", "tab2"];
var tabButtonIDs = ["tabButton1", "tabButton2"];
for (var i = 0; i < tabIDs.length; i++) {
document.getElementById(tabIDs[i]).style.display = (tabNumber == i ? 'block' : 'none');
document.getElementById(tabButtonIDs[i]).className = (tabNumber == i ? "active" : "");
}
}
</script>
Add these styles to your css
<style type="text/css">
#tabContainer
{
list-style: none;
margin: 0 0 5px 0;
padding: 0;
clear: both;
border-bottom: 1px solid #CCC;
height: 20px;
clear: both;
}
#tabContainer li
{
float:left;
margin-right: 7px;
text-align: center;
}
#tabContainer li a
{
background-color:transparent;
display: block;
height: 20px;
padding: 0 6px 0 6px;
background-color: white;
color: #666;
width: 80px;
text-decoration: none;
font-weight: bold;
}
.active
{
background-color: #DDD !important;
}
</style>
Add tab buttons
<ul id="tabContainer">
<li><a class="active" id="tabButton1" onclick="showTab(0)" href="javascript:void(0);">Option 1</a></li>
<li><a id="tabButton2" onclick="showTab(1)" href="javascript:void(0);">Option 2</a></li>
</ul>
Add tab content
<div id="tab1">Content 1</div>
<div id="tab2" style="display:none;">Content 2</div>
If I understand you correctly you don't even need any javascript to accomplish this.
Have a look at
http://devinrolsen.com/wp-content/themes/typebased/demos/css/vertical-menu/WORKS.html
for a 100% based css menu.
There is even a generator available
http://purecssmenu.com/