I got a menu and I would like to display the current page with different color of text, or a border bottom.
I know how to do this with different html files, though, the current website im working on, is on a single file, index.html. When I click on menu, it will scroll down to the specific tab.
Does anyone know any way of styling menu in a single file?
HTML:
<div id="menu">
<ul class="nav">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
</div>
CSS:
#menu ul li .a:hover {
color: #6D6D6D;
border-bottom: 2px solid #fcd017;
}
Currently I'm able to change it while hovering, but I would like to change it while i remain in the #section1 in this case.
<script type="text/javascript">
var backcolor = [
"#aaaaaa",
"#bbbbbb",
"#cccccc",
];
function changeBGcolor(whichcolor)
{
if (document.body)
{
document.getElementById('menu').style.backgroundcolor = '(' + backImage[whichcolor] + ')';
}
}
</script>
<div id="menu">
<ul class="nav">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
</div>
Try this sometimes it will be work
Related
I am trying to create a hamburger menu. When I click on the three lines I don't get the 'x'. I think I have the classes named correctly. If you need more code I can provide that also.
$('.js--nav-icon').click(function() {
var nav = $('.js--main-nav');
var icon = $('.js--nav-icon');
nav.slideToggle(200);
if (icon.hasClass('.menu-outline')) {
icon.addClass('.close-outline');
icon.removeClass('.menu-outline');
} else {
icon.addClass('.menu-outline');
icon.removeClass('.close-outline');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<img src="Resources/img/logo-white.png" alt="Omnifood logo" class="logo">
<img src="Resources/img/logo.png" alt="Omnifood logo" class="logo-black">
<ul class="main-nav js--main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
<ion-icon class="mobile-nav-icon js--nav-icon" name="menu-outline"></ion-icon>
</div>
You should not use dot(.) in jQuery hasClass,addClass,removeClass functions. remove those dots:
if (icon.hasClass('menu-outline')) {
icon.addClass('close-outline');
icon.removeClass('menu-outline');
}
else {
icon.addClass('menu-outline');
icon.removeClass('close-outline');
}
Please remove (.) as below:
icon.addClass('close-outline');
I tried not to include the code that was unnecessary so you may immediately see the problem. This code works when I comment out the specified code below or if I change the styling (i.e opacity). But I want the style to look like the submenu is coming down from the nav-bar and not just appear and hide below the nav-bar. At first, I thought it was a jekyll problem but after several trial and errors I found out that this was more of a styling problem.
<div id="navigation">
<nav class="nav-main row">
<div class="logo">
<p>Anatomy &<br>
Physiology</p></div>
<ul>
<li>
HOME
</li>
<li>
SYSTEMS
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>SKELETAL SYSTEM</li>
<li>MUSCULAR SYSTEM</li>
<li>CARDIOVASCULAR SYSTEM</li>
<li>DIGESTIVE SYSTEM</li>
<li>ENDOCRINE SYSTEM</li>
<li>NERVOUS SYSTEM</li>
<li>RESPIRATORY SYSTEM</li>
<li>IMMUNE/LYMPHATIC SYSTEM</li>
<li>URINARY SYSTEM</li>
<li>FEMALE REPRODUCTIVE SYSTEM</li>
<li>MALE REPRODUCTIVE SYSTEM</li>
<li>INTEGUMENTARY SYSTEM</li>
</ul>
</div>
</div>
</li>
<li>
LESSON GUIDE
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
.nav-main {
ul {
}
}
.nav-item {
&:hover {
background-color: $nav-hover-color;
color: $text-color-hover;
#include transition(background-color, 0.6s, ease-in-out);
}
&:focus{
background-color: $nav-hover-color;
color: $text-color-hover;
~ .nav-content{
max-height: 800px;
#include transition(max-height, 0.7s, ease-in);
}
}
}
}
.nav-content {
padding-right: 10px;
position: relative;
top: 5px;
overflow: hidden; <--(when commented out, link works)
max-height: 0; <--(when commented out, link works)
background-color: $nav-hover-color;
z-index: 50;
border-radius: 4px;
This should work. It is taken from the code of default jekyll website:
<li>SKELETAL SYSTEM</li>
Make sure you have set baseurl: "" in _config.yml, properly.
See this article about baseurl.
If the base URL is the root of your domain (and if you're sure that this will never change!), you can get this to work without setting baseurl in _config.yml (as suggested in the other answer).
Just make the link start with /:
<li>SKELETAL SYSTEM</li>
The leading slash indicates your domain's root, so the link in the previous example actually goes to http://yourdomain.com/systems/index.html
That's why the first link in your code probably works without setting baseurl in the config file:
<li class="two columns">
HOME
</li>
Here is my code:
a) I have a row of buttons at the top formatted horizontally as such:
HTML:
<ul class="nav">
Work
Volunteer
Education
Skills
References
Images
</ul>
b) I have div blocks each displaying a paragraph:
<div class="jobs">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
c) I want the CSS to not display the jobs div yet:
.jobs {
display: none;
}
d) Now that I hover over the first button I want the jobs div to display:
.button1:hover+.jobs {
display: block
}
e) Repeat for all other div sections
.volunteer {
display: none;
}
.button2:hover+.volunteer {
display:block
}
You will need to markup HTML differently.
.jobs, .volunteer {
display: none;
}
.button1:hover+.jobs, .button2:hover+.volunteer {
display: block;
/* position the divs under the navigation links */
position: absolute;
top: 120px;
}
<ul class="nav">
<li>
Work
<div class="jobs">
<h2>h2 jobs</h2>
<h3>h3 jobs</h3>
<h4>h4 jobs</h4>
</div>
</li>
<li>
Volunteer
<div class="volunteer">
<h2>h2 volunteer</h2>
<h3>h3 volunteer</h3>
<h4>h4 volunteer</h4>
</div>
</li>
<li> Education</li>
<li> Skills</li>
<li> References</li>
<li> Images</li>
</ul>
This is impossible, as described, with your current HTML, with only HTML and CSS (though only perhaps until the reference and :matches() pseudo-selectors arrive). However, if, rather than :hover you'd be willing to work with clicks on the list-elements, it can be done (without JavaScript). Given the corrected HTML:
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<!-- and so on... -->
</ul>
<div id="details">
<div id="jobs"></div>
<div id="volunteer"></div>
<!-- and so on... -->
</div>
The following CSS will show the relevant div element once the <a> element has been clicked on (note that the use of an id is essential for this to work):
#details > div {
/* to hide the eleemnt(s) initially: */
display: none;
}
#details > div:target {
/* to show the relevant element once the relevant link is clicked: */
display: block;
}
#details > div[id]::after {
content: attr(id);
}
#details > div {
display: none;
}
#details > div:target {
display: block;
}
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<li> Education
</li>
<li> Skills
</li>
<li> References
</li>
<li> Images
</li>
</ul>
<div id="details">
<div id="jobs"></div>
<div id="volunteer"></div>
<div id="education"></div>
<div id="skills"></div>
<div id="references"></div>
<div id="images"></div>
</div>
With plain JavaScript, on the other hand, it can be achieved with:
// the 'e' argument is automatically to the function by addEventListener():
function toggleRelevant (e) {
// caching the 'this' element:
var self = this,
// finding the div element with a class equal to the href of the 'a' element
// (though we're stripping off the leading '#':
relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1) );
// if the event we're responding to is 'mouseover' we set the display of the
// found div to 'block', otherwise we set it to 'none':
relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}
// finding all the a elements that are in li elements:
var links = document.querySelectorAll('li a');
// iterating over those a elements, using Array.prototype.forEach:
[].forEach.call(links, function(linkElem){
// adding the same event-handler for both mouseover and mouseout:
linkElem.addEventListener('mouseover', toggleRelevant);
linkElem.addEventListener('mouseout', toggleRelevant);
});
function toggleRelevant(e) {
var self = this,
relevantElement = document.querySelector('div.' + self.getAttribute('href').substring(1));
relevantElement.style.display = e.type === 'mouseover' ? 'block' : 'none';
}
var links = document.querySelectorAll('li a');
[].forEach.call(links, function(linkElem) {
linkElem.addEventListener('mouseover', toggleRelevant);
linkElem.addEventListener('mouseout', toggleRelevant);
});
div[class] {
display: none;
}
div[class]::before {
content: attr(class);
color: #f00;
border: 1px solid #f00;
padding: 0.2em;
}
<ul class="nav">
<li>Work
</li>
<li> Volunteer
</li>
<!-- and so on... -->
</ul>
<div class="jobs">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
<div class="volunteer">
<h2>text</h2>
<h3>text</h3>
<h4>text</h4>
</div>
<!-- and so on... -->
I don't think this is do able in css since display blocks (job, volonteer, ...) and button are not parent. But in jQuery this is fairly simple :
$('.buttonX').hover(
function() {
// Styles to show the box
$('.boxX').css(...);
},
function () {
// Styles to hide the box
$('.boxX').css(...);
}
);
It sounds like you're trying to do some kind of a tab menu where pressing a specific button shows a different content. Here's a SO page that describes how it's done: How to make UL Tabs with only HTML CSS
I have my navbar of links and when the user is on a page that corresponds to one of the links I want to change the background color of that link. For example, when the user is on the home page I want to change the background color of the home link. I tried with #navbar li a:current but that doesn't work.Is this possible with css?
html:
<div id="navbar">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
CSS:
#navbar li a.current {
background-color: #FFF;}
Your CSS is wrong. It should be #navbar li a.current {
background-color: #FFF;} You had a colon after a:current.
Your HTML should be like this:
<div id="navbar"><ul>
<li class="current">Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
<div id="navbar">
<ul>
<li class="current">Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
Now create a background color for the class of "current". You'll have to apply that class with the backend logic. CSS cannot workout the logic by itself. It only handles the styles
You could use javascript(jQuery) like this:
var currenturl = window.location.pathname.split( '/' );
$('#navbar>li>a[href="'+currenturl[1]+'"]').css({background: 'some_color'})
If you want to accomplish this only with CSS, maybe you can use the parent's IDs:
<div id="parent1">
<div id="navbar">
<ul>
<li class="home">Home</li>
<li class="service">Services</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="sample">Samples</li>
</ul>
</div>
</div>
<div id="parent2">
<div id="navbar">
<ul>
<li class="home">Home</li>
<li class="service">Services</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="sample">Samples</li>
</ul>
</div>
</div>
And then...
#parent1 li.home {
background: red;
}
#parent2 li.home {
background: black;
}
You could do this using Javascript/JQuery (although a server-side approach is probably better):
var currentPath = window.location.pathname;
var pageName = currentPath.substr(currentPath.lastIndexOf('/')+1); // "index.html", etc
$("a[href=" + pageName + "]").parent().css("background", "#FFF");
The above requires JQuery, but you can do something similar in pure Javascript:
var targets = document.querySelectorAll('a[href=' + pageName + ']');
if (targets.length > 0) {
targets[0].parentNode.style.background = "#FFF";
}
(Fiddle)
Offcourse it is possible with pure css3. You could give an id to all your 'li' s.
like ,
li id="sample"
then modify your anchor to
a href="index.html#sample"
use CSS :target selector
li:target{
// apply your styles here
}
simple
Is there a way in HTML/CSS to change color of just one list item not all of them? I just want to change the color of each of them so the user knows what page he is on. for now I managed only to do the a:hover but I cant figure out how could I do it so the color would stay.
HTML:
<div id="nav">
<div class="wrapper">
<ul id="buttons">
<li>| About</li>
<li>| Gallery</li>
<li>| Prices</li>
<li>| FAQ</li>
<li>| Contact Us</li>
<div class="clear"></div>
</ul>
</div>
</div>
CSS:
#buttons {
background-color: black;
}
.clear { clear: both; }
#buttons li a
{
position:block;
color:#fff;
padding:1em;
text-decoration:none;
float:left;
width:95px;
}
#buttons li a:hover
{
background-color:#bc1b32;
}
Look: http://jsfiddle.net/qzXgJ/
Detail:
HTML
<div>
<div class="wrapper">
<ul>
<li><a id="index" href="#">| About</a></li>
<li><a id="gallery" href="#">| Gallery</a></li>
<li><a id="prices" href="#">| Prices</a></li>
<li><a id="faq" href="#">| FAQ</a></li>
<li><a id="contact_us" href="#">| Contact Us</a></li>
<div class="clear"></div>
</ul>
</div>
</div>
JS
$(".wrapper li a").click(function () {
$('.wrapper li a').each(function() {
$(this).removeClass('selected');
});
$(this).addClass('selected');
$(".wrapper ul li a").click(function () {
$('.wrapper ul li a').each(function() {
$(this).removeClass('selected');
});
$(this).addClass('selected');
console.log($(this).attr('id'));
/* Get html by jQuery */
$.get($(this).attr('id'),function(data){
$('#result').html(data);
});
return false;
});
CSS
.selected
{
background-color:#b51ba2;
}
easiest way would be to just create a class, lets say selected, add it to the a tag you'd like to change the color of, and that's it:
.selected { background-color: green; }
then your link would be:
<li><a class='selected' href="index.html">| About</a></li>
I've used this answer for the same question with good results: http://hicksdesign.co.uk/journal/highlighting-current-page-with-css
The question is a little vague; to indicate which page the user is on you could add a class to that particular list item that houses the link they last clicked:
<li class="current">
| Prices
</li>
You then provide specific styles for that:
li.current {
background-color: #f1f1f1;
}