Develop Reference

How to make active button in navigation bar change color

Ok so i'm super beginner with html and css and i don't know javascript at all.I'm creating a little website as a school project, i made horizontal navigation bar from w3schools tutorial, what i want to do is when i press one of the buttons to stay colored, not just change color for 1 sec because they are 'active'. My code may be completely messy but i really need help.
Also i have 3 more subpages connected to this one, i want them to stay colored as well.
What i'm trying to achieve is exactly this: How can I add class on active li with JavaScript code
But it doesnt work for me, maybe i need to change something in javascrip because my class is named 'navbar'?
I've tried several solves from this topic on stack overflow but none of these work for me :\
HTML:
<ul class="navbar">
<li>Pocetna</li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS:
.navbar {
list-style-type: none;
position: sticky;
top: 0;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: Arial;
}
.navbar li a:hover {
background-color: #111;
}
Im expecting link to stay orange when im on that page.

you can do some things with jquery like add an event listener that changes the css of html elements
const changeColor = () => {
$('ul > li > a').css('background-color', 'inherit')
$(event.target).css("background-color", "red")
}
$('ul > li > a').on('click', changeColor)
https://jsfiddle.net/z02ndowt/

You can do this by adding a class onto your html <a> tag on the link that is active and then just style the active class within your CSS. See below:
HTML
<ul class="navbar">
<li><a class="active" href="sajt.html">Pocetna</a></li>
<li>Stranica 2</li>
<li>Stranica 3</li>
<li style="float: right;">Kontakt</li>
</ul>
CSS
.active {
color: orange;
}

Ok so i did some testing and kinda found a solution. I put identificator on instead of class. So on my main page i put id="active" on first link, on my second page on second link etc. then just added #active { background-color: orange; } and it works just how i wanted it to work.

sub-menu expansion and innerHTML replacement based on onclick, using just Javascript

First, I should mention that I'm about 4-weeks new to the coding world, and this is the first time I'm trying to make (what I thought would be) a simple site.
I have seen many similar questions on Stack Overflow, but in trying to adapt the code samples provided in the solutions, the solution would stop working.
So, the current hurdle is:
I have a menu defined in HTML with a sub-menu in one of the <li> elements ("Portfolio"), and that <li> element contains the character ▼ (&#9660).
I set up an onclick event for that <li> element so that when it was clicked it would do two things: expand/display the sub-menu <li> elements directly below it (pushing the other <li> elements in the menu further down), and replace the ▼ character with a ▲ character (&#9650)... until the <li> element was clicked again to shrink/hide the sub-menu.
I'm not sure if it matters, but this menu is inside a grid item because the page is set up using CSS Grid.
So basically:
HOME
ABOUT US
PORTFOLIO ▼
INFORMATION
CONTACT
...would become:
HOME
ABOUT US
PORTFOLIO ▲
LINK 1
LINK 2
LINK 3
INFORMATION
CONTACT
No matter how I set up my classes and IDs, I cannot get the arrow symbol to swap, and somewhere along the line, I messed up the coding and now the sub-menu doesn't even expand anymore.
It's likely embarrassingly bad code (given that I've tried to mash together bits from samples I've seen) but here is what I have. Thanks in advance.
var arrowstring = document.getElementById("arrowdirection").innerHTML;
document.getElementById("IDforPortfolioLink").classList.toggle("show");
if (IDforPortfolioLink.classList.contains('show')) {
arrowstring = "&#9650"
} else {
arrowstring = "&#9660"
}
arrowdirection.textContent = arrowstring;
}
.sub-menu-content {
display: none;
position: absolute;
}
.sub-menu-content a {
display: block;
}
.sub-menu-content a:hover {
background-color: green;
}
.show {
display: block;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ul class="menu">
<li>Home</li>
<li>About us</li>
<li class="LinkForPortfolio" id="IDforPortfolioLink" onclick= "myFunction()">LINK <span class="arrow" id= "arrowdirection">▼</span><div class="sub-menu-content" id="myportfolio">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
</li>
<li>Information</li>
<li>Contact</li>
</ul>
</body>
</html>

Well, your code had so many flaws I had to rewrite it.
I'll explain everything that I possibly can of what I did here:
I changed the HTML a bit: I have added div's, instead of ul's with li's, inside a nav(container). It's more indicated to do so because it keeps the markup clean, and is less harder to debug.
I have assigned nav a display: flex; justify-content: center; align-items: center; which centers the divs inside nav, and inlines them. I did so with nav div, which pretty much centered the text inside of them.
I have removed all of the classes expect of .portfolio because it's useless to have that many classes.
I made div.expand-portfolio a child of div.portfolio, which in itself(.expand-portfolio) has another ul child, which holds the links. You might've noticed that I've added .portfolio a position: relative; and .expand-portfolio a position: absolute;. I did that because, I wanted to take .expand-portfolio out of the document flow, which basically means I wanted to make .expand-portfolio not interact with any element on the page. Now, when assigning position: absolute; to a child inside a container, the child's position is going to be relative to the document and not the parent. This is why you may add position: relative; to the parent.
I created a separate class called .expanded which gives .expand-portfolio a height of 150px when assigned to it.
You also might have noticed I gave the divs inside the nav a transition: 500ms ease, what that does is make the transition between the properties smooth, and not sudden. You may remove that property from them if you don't want that.
Now, the javascript.
When I made those 3 variables, which are the references of the elements from the page, you noticed I used document.getElementsByClassName followed by a [0]. What document.getElementsByClassName() returns is: a nodelist. Documentation here. It's basically a sort of "array", and with [0] appended to it, I select only the first and only element of the page with that class.
You may have observed I added the onclick function in the javascript file. Personal preference. I said that when I click the portfolio button, first, you should change that span's innerHTML. (the span element holds the actual symbol). I also said you should toggle the .expanded class. And, I made an if statement, checking if .expand-portfolio doesn't contain the class. If it doesn't, you can pretty much see what it does.
I hope it helps. If you have any more questions, ask them in the comments.
var portfolio = document.getElementsByClassName("portfolio")[0];
var portfolioInner = document.getElementsByClassName("inner-html")[0];
var expandPortfolio = document.getElementsByClassName("expand-portfolio")[0];
portfolio.onclick = function(){
portfolioInner.innerHTML = "▲";
expandPortfolio.classList.toggle("expanded");
if(!expandPortfolio.classList.contains("expanded")){
portfolioInner.innerHTML = "▼"
}
};
html, body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.menus-container {
height: 100%;
width: auto;
}
.menus-container > div {
padding: 10px 10px 5px;
transition: 500ms ease;
width: 30%;
height: 100%;
cursor: pointer;
}
.expand-portfolio {
overflow: hidden;
width: 100px;
height: 0;
background-color: #000;
transition: 500ms ease;
}
.expand-portfolio ul {
padding-left: 25px;
}
.expand-portfolio ul li {
padding: 10px 0 10px 0;
color: #fff;
}
.portfolio span {
margin-left: 5px;
}
.expanded {
height: 150px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="menus-container">
<div>Home</div>
<div>About Us</div>
<div class="portfolio">Portfolio <span class="inner-html">&#9660</span>
<div class="expand-portfolio">
<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
</ul>
</div>
</div>
<div>Information</div>
<div>Contact</div>
</div>
</body>
</html>

Add Trailing Ellipsis To Breadcrumb Depending On Device Width

On my user interface I have a breadcrumb of which shows on the top bar. Upon the device width being below a defined width, it'll drop below the top bar and be it's own bar, however what I do not know how to do is add a trailing ellipsis upon the breadcrumb length being larger than the device width.
Example Breadcrumb:
<nav>
<ul>
<li>Home</li>
<li>>></li>
<li>User</li>
<li>>></li>
<li>Inbox</li>
<li>>></li>
<li>Mail_ID</li>
</ul>
</nav>
Note: >> represents a FontAwesome icon in an i tag
Upon the breadcrumb being larger than the device width, the best I can describe what I would like to happen is demonstrated below:
Home >> User >> Inbox >> Mail_ID
... User >> Inbox >> Mail_ID
... Inbox >> Mail_ID
... Mail_ID

This is still a partial code but might help you.
Idea
On load, call a function that checks for with of ul and its parent container.
If ul has greater width, hide first 2 visible li. Also add an li for ellipsis and make it hidden initially and make it visible only if any of other divs are hidden.
Repeat this process recursively and you will get what you are looking for.
Sample
$(function() {
$(".content").resizable();
$(".content").on("resize", function() {
var ul = $(this).find('ul');
if (ul.width() > $(this).width()) {
var lis = ul.find('li:not(.hide):not(.ellipsis)');
for (var i = 0; i < 2; i++) {
$(lis[i]).addClass("hide");
}
if ($(".ellipsis").not(":visible"))
$(".ellipsis").removeClass("hide")
}
})
});
.content {
text-align: left;
border: 1px solid gray;
width: 300px;
height: 40px;
max-height: 40px;
}
.content ul {
padding: 0px;
position: fixed;
overflow: hidden;
white-space: nowrap;
}
.content ul li {
display: inline-block;
text-decoration: none;
}
.hide {
display: none!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="content">
<ul>
<li class="hide ellipsis">...</li>
<li>Home</li>
<li>>></li>
<li>User</li>
<li>>></li>
<li>Inbox</li>
<li>>></li>
<li>Mail_ID</li>
</ul>
</div>

You can try to use the CSS-only ellipsis, but I don't know if it also works with <ul><li>. For sure it works with simple strings:
Use this HTML:
<ul class="ellipsis">
And this CSS:
ul.ellipsis
{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

Dropdown menu css / js on Ipad

I'm working on a website with a simple and pure css dropdown menu. That website is supposed to be used on desktop and on Ipads. My dropdown menu uses :hover pseudo-class and issue appears on the touch screen: the menu expands well but it never collapse. The only way to close it is to open another submenu from the same dropdown menu. My goal is that my menu collapse when I touch anywhere in the DOM (except in the menu of course). After many researches, it appears that we can not do this with css, js is obligatory. I am a beginner and I have no skill in JS, is it possible to do it with only few vanilla js lines ? I don't want to use jquery. Here is my code:
/* ========================================================================= */
/* Global styles */
/* ========================================================================= */
html {
box-sizing: border-box;
font-size: 62.5%;
}
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body, input {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
img {
border: none;
}
/* ========================================================================= */
/* Layout styles */
/* ========================================================================= */
body > header, body > main {
margin: auto;
}
body > header {
padding-top : 20px;
width: 768px;
}
body > header > img {
width: 150px;
margin-left: 10px;
}
/* ========================================================================= */
/* Nav styles */
/* ========================================================================= */
body > header > nav {
min-width: 768px;
margin: 0 auto;
padding-top: 20px;
font-size: 1.5em;
text-align: center;
}
nav > ul ul {
position: absolute;
display: none;
text-align: left;
}
nav li {
width: 150px;
}
nav > ul > li {
display: inline-block;
}
nav a {
display: block;
text-decoration: none;
}
nav > ul > li > a {
padding: 10px 0;
color: #44546A;
}
nav > ul ul li {
background-color: #333F50;
list-style-type: none;
}
nav > ul ul li a {
padding: 10px 0 10px 30px;
color: #FAFAFA;
font-size: 0.9em;
}
nav > ul li:hover ul {
display: block;
}
nav > ul ul li:hover {
background-color: #51647f;
}
<!DOCTYPE html>
<html>
<head>
<base href="/"/>
<meta charset="UTF-8"/>
<title>Test Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<header>
<img src="img/test.svg" alt="test"/>
<nav>
<ul>
<li>
Menu 1
<ul class="subMenu">
<li>
SubMenu 1.1
</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>
SubMenu 2.1
</li>
<li>
SubMenu 2.2
</li>
<li>
SubMenu 2.3
</li>
</ul>
</li>
<li>
Menu 3
<ul>
<li>
SubMenu 3.1
</li>
</ul>
</li>
<li>
Menu 4
<ul class="subMenu">
<li>
SubMenu 4.1
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
Edit : That code works well on tablets but not on Ipads

The :hover pseudo-class behaves differently on touch screen devices. When the user touches an element, the browser triggers and keeps the state :hover until another pseudo-class is triggered. Thus, when the user touches another element on the page, a different pseudo-class is triggered by the browser and the drop-down menu becomes hidden. Most of the time, it is the :active pseudo-class that is triggered.
However, as explained on the Safari Developer Library, Mobile Safari doesn't trigger the :active pseudo-class unless a touch event is attached to the element:
On iOS, mouse events are sent so quickly that
the down or active state is never received. Therefore, the :active
pseudo state is triggered only when there is a touch event set on the
HTML element—for example, when ontouchstart is set on the element...
To fix this, you can add a touchstart listener to your document in order to trigger the :active pseudo-class:
document.addEventListener('touchstart', function() {});

Here a solution, ask if you want explanation.
<nav id='nav'>
...
<script>
function hideDropDownMenu(e) {
var element = e.target;
var parent = element.parentNode;
var mustHide = false;
while (parent != null && !mustHide) {
mustHide = element.id === 'nav';
element = element.parentNode;
}
var subMenus = document.getElementsByClassName('subMenu');
var i = 0;
for (i = 0; i < subMenus.length; i++) {
var subMenu = subMenus[i];
subMenu.style = mustHide ? 'none !important' : 'block'; // not sure if the !import is optionnal
}
}
document.body.addEventListener('click', hideDropDownMenu);
</script>

As I posted in another question:
I solved this problem by adding a tabindex to the <body> tag, like this:
<body tabindex="0">
This little trick allowed iPad Safari to focus on the body when it's tapped on, and remove the focus from the dropdown menu.
No Javascript required. 😊

Closing drop-down menu by clicking on the button itself

I've seen a lot of questions on this wesite about closing a drop-down menu by clicking anywhere on the page.
My question is a little bit different though. I don't want the dropdown-menu to close by clicking outside of it. The moment I click on the button that shows me the menu, I want the menu to stay like that (drop-downed) untill the user clicks on that same button again. Also, the moment when the menu is shown, I want it to push the other elements direcly beneath it down. These elements could be for example other buttons. You guys might have seen this concept on some websites and I like the idea. I want to create the same thing, but I don't how.
This will probably be made with Javascript since this is easier, but I don't know how to do it. Do you guys have any ideas or tips?
I would be very grateful. Thanks in advance.
Edit: Here's an example of what I ment: Link to jsfiddle ->https://jsfiddle.net/Cerebrl/uhykY/
I want to push down button 2 and 3 the moment the first menu is drop downed, so it can create it's own space to display. And secondly, the menu should only close the moment I push the button, not by clicking outside of it.

Your can use toggleSlide method in two lines like
$(function(){
$('button').click(function(){
$('ul').slideToggle();
});
});
ul {
background: none #FA982E;
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul a {
display: block;
padding: 5px 20px;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<button data-toggle="#menu-main" title="Click to toggle">Toggle Menu</button>
</p>
<ul id="menu-main">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>

If you want the menu to push the content below, than put it in normal flow. What you need is a simple jQuery's slideToggle method and to hide the menu by default:
$('[data-toggle]').on('click', function(e){
e.preventDefault;
var thisLink = $(this);
var toToggle = $( thisLink.data('toggle') );
toToggle.slideToggle(200);
})
* {
font-family: sans-serif;
}
.toggle-menu a {
display: block;
float: right;
padding: 5px 20px;
text-align: center;
background: none #F1B475;
cursor: pointer;
}
#menu-main {
background: none #FA982E;
margin: 0;
padding: 0;
list-style: none;
display: none;
}
#menu-main a {
display: block;
padding: 5px 20px;
text-decoration: none;
}
#menu-main a:hover,
#menu-main a:focus {
background: none #D0812D;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-menu">
<p>
HALLO
<a data-toggle="#menu-main" title="Click to toggle">+</a>
</p>
</div>
<ul id="menu-main">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
<p>
Other content
</p>
Since the menu has no absolute or fixed position, it will push the content below it. JSFiddle playground