I've the following code:
<div class="container">
// some other code
<ul>
<li>about</li>
<li>service</li>
<li>contact</li>
</ul>
</div>
The <a> links are styled as buttons.
Now I want to achieve, when I hovering the <a> link, I will add a background image to the container-div. But each of the <li>'s have their own image. So when I hover the "about" link, the container div get's a "about"-image. When I hover the "service" link, the container div get's a "service"-image.
How can I achieve that?
What I already tried:
.container ul li a:hover .container{ background-image: url('path/to/image) }
.container ul li a:hover > .container{ background-image: url('path/to/image) }
.container ul li a:hover ~ .container{ background-image: url('path/to/image) }
.container ul li a:hover + .container{ background-image: url('path/to/image) }
WHEN IT IS NOT POSSIBLE WITH ONLY CSS, Is there a way with JavaScript / jQuery?
jQuery:
$('.container > ul > li > a').each(function() {
$(this).hover(function() {
$('.container').toggleClass(this.hash.replace('#', ''));
});
});
CSS:
.about { background-image: url('path/to/image1') }
.service { background-image: url('path/to/image2') }
.contact { background-image: url('path/to/image3') }
I don't think it is possible using css alone
<div class="container">// some other code
<ul>
<li>
about
</li>
<li>
service
</li>
<li>
contact
</li>
</ul>
</div>
then
.container.about{
background-image: url(...)
}
and
jQuery(function ($) {
$('.container li a').hover(function () {
$('.container').addClass($(this).data('type'))
}, function () {
$('.container').removeClass($(this).data('type'))
})
})
Demo: Fiddle
<div class="container">
// some other code
<ul>
<li>about</li>
<li>service</li>
<li>contact</li>
</ul>
</div>
$(document).ready(function() {
$('#1').hover(function(){
$('.container').css("background","url(images/pic1.jpg)");
}, function () {
$('.container').css("background","'none'");
});
$('#2').hover(function(){
$('.container').css("background","url(images/pic2.jpg)");
}, function () {
$('.container').css("background","'none'");
});
$('#3').hover(function(){
$('.container').css("background","url(images/pic3.jpg)");
}, function () {
$('.container').css("background","'none'");
});
});
Related
I would like to show the three social elements generated by the "social" link on the left of the same "social" link after clicking on it.
So, I would like to get this IN THE SAME LINE like after clicking on "social":
FACEBOOK TWITTER EMAIL SOCIAL
Thank you in advance for your help!
$(document).ready(function () {
$(".icon-social-1", this).on("click", function (e) {
e.preventDefault();
$(this).siblings(".subicons").toggle();
});
});
a.trigger {
color:#000;
cursor:pointer;
display:block;
margin-bottom:10px;
text-decoration:none;
}
.subicons
{
display:none;
}
li.list{
display:inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>Show/hide on click:</strong></p>
<div class="socials click">
<ul>
<li>
<i>Social</i>
<ul class="subicons">
<li class="list">Facebook</li>
<li class="list">Twitter</li>
<li class="list">e-mail</li>
</ul>
</li>
</ul>
</div>
jQuery's toggle() function show element with the CSS display: block property, which will not achieve what you want. Use the css() function or toggleClass() function instead.
JavaScript:
$(this).siblings(".subicons").toggleClass('hide');
CSS:
.subicons{
display:inline;
padding-left:0;
}
.subicons.hide {
display:none;
}
$(document).ready(function () {
$(".icon-social-1", this).on("click", function (e) {
e.preventDefault();
$(this).siblings(".subicons").toggleClass('hide');
});
});
a.trigger {
color:#000;
cursor:pointer;
display:block;
margin-bottom:10px;
text-decoration:none;
}
.subicons
{
display:inline;
padding-left:0;
}
.subicons.hide
{
display:none;
}
li.list{
display:inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>Show/hide on click:</strong></p>
<div class="socials click">
<ul>
<li>
<ul class="subicons hide">
<li class="list">Facebook</li>
<li class="list">Twitter</li>
<li class="list">e-mail</li>
</ul>
<i>Social</i>
</li>
</ul>
</div>
Try this:
$(document).ready(function () {
$(".icon-social-1", this).on("click", function (e) {
e.preventDefault();
$(this).siblings(".subicons").toggle();
});
});
a.trigger {
color:#000;
cursor:pointer;
display:block;
margin-bottom:10px;
text-decoration:none;
}
.subicons
{
display:inline-block;
}
li.list{
display:inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>Show/hide on click:</strong></p>
<div class="socials click">
<i>Social:</i>
<div class="subicons" style="display:none">
Facebook
Twitter
e-mail
</div>
</div>
.subicons {
display: none;
padding-left: 0;
}
I think he wants to remove the padding caused by ul tag. UL tags have padding left by default.
.subicons {
padding-left: 0;
}
The above code will solve your issue.
Just move sublist before the hyperlink so they're in the correct order already and then set display: inline-block on the subicons list.
.subicons {
display: inline-block;
}
<li>
<ul class="subicons">
<li class="list">Facebook</li>
<li class="list">Twitter</li>
<li class="list">e-mail</li>
</ul>
<i>Social</i>
</li>
If you don't want to change the order of the html and want the "social" link to stay in one place you can use absolute positioning for the social links. Ensure there's a parent that's positioned, in this case I chose .socials. Also, a.trigger wasn't doing anything.
$(document).ready(function() {
$(".icon-social-1", this).on("click", function(e) {
e.preventDefault();
$(this).siblings(".subicons").toggle();
});
});
a.icon {
color: #000;
cursor: pointer;
display: block;
margin-bottom: 10px;
text-decoration: none;
padding-left: 170px;
}
.socials {
position: relative;
}
ul.subicons {
display: none;
position: absolute;
left: 0;
top: 0;
}
li.list {
display: inline;
}
li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>Show/hide on click:</strong></p>
<div class="socials click">
<ul>
<li>
<i>Social</i>
<ul class="subicons">
<li class="list">Facebook</li>
<li class="list">Twitter</li>
<li class="list">e-mail</li>
</ul>
</li>
</ul>
</div>
I'mm trying to design a specific type of navbar in javascript/jquery.
I cannot get mouseenter() and mouseleave() to work correctly when the mouse passes between the li objects.
Here is my code. Any ideas?
http://jsfiddle.net/richofwombwell/1v8L0pdz/38/
function inversebuttonon(liId, aId) {
$(liId).css('background-color', 'white');
$(aId).css('background-color', 'white');
$(aId).css('color', '#0086CA');
}
function inversebuttonoff(liId, aId) {
$(liId).css('background-color', '#0086CA');
$(aId).css('background-color', '#0086CA');
$(aId).css('color', 'white');
}
function showselectedmenu(liclass, aclass) {
$('.menu').css('max-height', '100px');
$(liclass).css('display', 'inline');
$(aclass).css('display', 'inline');
}
function dontshowselectedmenu(liclass, aclass) {
$('.menu').css('max-height', '0px', 'none');
$(liclass).css('display', 'none');
$(aclass).css('display', 'none');
}
$('#n-2').mouseenter(function () {
inversebuttonon('#n-2', '#a2');
showselectedmenu('.tmenuli', '.tmenua1');
});
$('.menu').mouseleave(function () {
dontshowselectedmenu('.tmenuli', '.tmenua1');
inversebuttonoff('#n-2', '#a2');
});
$('#n-3').mouseenter(function () {
inversebuttonon('#n-3', '#a3');
showselectedmenu('.tmenuli2', '.tmenua2');
});
$('.menu').mouseleave(function () {
dontshowselectedmenu('.tmenuli2', '.tmenua2');
inversebuttonoff('#n-3', '#a3');
});
Your script does not work correctly because your html code is invalid (you are nesting DIVs instead of list elements. That forces the browser to correct your code (the way it wants to).
Before you continue scripting, please consider using CSS solution:
* {
box-sizing: border-box;
font-family: sans-serif;
font-size: 16px;
}
.my_menu {
height: 66px;
text-align: center;
width: 100%;
overflow:
}
.my_menu ul {
list-style: none;
}
.my_menu ul li {
display: inline-block;
}
.my_menu > ul {
position: relative;
background: none #0086CA;
}
.my_menu ul a {
text-decoration: none;
color: #fff;
display: inline-block;
}
.my_menu > ul > li > a {
padding: 15px 20px;
}
.my_menu > ul > li > a:hover,
.my_menu > ul > li a:focus {
color: #0086CA;
background: #fff;
}
.my_menu ul ul {
background: none grey;
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100%;
display: none;
}
.my_menu ul li:hover ul {
display: block;
}
.my_menu ul ul a {
padding: 5px 10px;
}
.my_menu ul ul a:hover,
.my_menu ul ul a:focus {
background: none black;
}
<header>
<nav class="my_menu">
<ul>
<li>
Home
</li>
<li>
menuitem1
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</li>
<li>
menuitem2
<ul>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</li>
</ul>
</nav>
</header>
Also at Playground.
You can probably clean this up but if you insist on a script method, this will work: It also should be easier to extend with less id's etc. just add markup.
Working example here: http://jsfiddle.net/MarkSchultheiss/fLqs1nru/2/
function showmenu(targ, me) {
$('.menuitem').removeClass('menu-on');
$(me).parent().addClass('menu-on');
$('.menu').hide();
$('.' + targ).show();
}
$('.menuitem a').mouseenter(function () {
var targ = $(this).parent().data("targetmenu");
showmenu(targ, this);
});
$('nav').mouseleave(function () {
$('.menuitem ').removeClass('menu-on');
$('.menu').hide();
});
Adjust the markup, get rid of the div and add some classes. Add a data element for the target menu to use.
<nav>
<ul class="ulparent">
<li class="navitem" id="n-1">Home
<li class="navitem menuitem" data-targetmenu="menu1">menuitem1
</li>
<li class="navitem menuitem" data-targetmenu="menu2"><a href="#" >menuitem2</a>
</li>
<ul class="menu menu1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<ul class="menu menu2">
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</ul>
</nav>
add this to the end of you CSS (which can probably be cleaner but this is only additive:)
.menu-on {
background-color: white;
}
.menu-on a {
color:#0086CA;
}
.menu {
max-height:100px;
display:none;
}
I've created a smooth scrolling page with some relatively simple javascript, where each li in the navigation links to a different section div, moving down the page.
Unfortunately, my a:active doesn't work in the nav with this, and I'm fairly sure it's something in javascript I need to add, but can't seem to get it right. I've added "nav a:active" and also ".active" to my CSS to use in javascript. Could someone please help? Is it something with addClass/removeClass?
My HTML:
<nav>
<div id="nav-list">
<ul>
<li>MUSIC</li>
<li>SHOWS</li>
<li>CONTACT</li>
<li>SUPPORT</li>
</ul>
</div>
</nav>
<div id="container">
<section id="home">
</section>
<section id="page1">
</section>
<section id="page2">
</section>
<section id="page3">
</section>
<section id="page4">
</section>
</div>
I added these to my CSS (link and hover work):
nav a:link, a:visited {
font: sans-serif;
font-size: 20px;
color: black;
text-decoration: none;
}
nav a:hover {
background-color: black;
color: white;
}
nav a:active {
background-color: black;
color: white;
}
.active {
background-color: black;
color: white;
}
`Here's my script.js
$(function(){
$("nav a").click(function() {
var navId= $(this).attr("href");
$("html body").animate({scrollTop: $(navId).offset().top},600);
return false;
/* I thought something like this would work...
if (navId === true {
("nav a").addClass("active");
} else { ("nav a").removeClass("active");
);
*/
});
});
Wouldn't that be simple as this
$(function () {
$("nav a").click(function (e) {
e.preventDefault();
var navId = $(this).attr("href");
$("html body").animate({
scrollTop: $(navId).offset().top
}, 600);
$(this).closest('ul').find('a').removeClass("active");
$(this).addClass("active");
});
});
Hi I'm new to Javascript and since there is no onclick for css I need a little help.
This is my html:
<div id="dropnav">
<ul>
<li><a>Navigation</a>
<ul>
<li>Home
</li>
<li>Paintings
</li>
<li>Contact
</li>
<li>Bio
</li>
</ul>
</li>
</ul>
</div>
and this is my css:
#dropnav {
position:relative;
z-index:100;
top:-60px;
left:18%;
background-size:18%;
}
#dropnav ul {
padding:0px;
margin:0px;
}
#dropnav ul li {
display:inline;
float:left;
width:68.5%;
list-style-type:none;
border-style:solid;
border-width:1px;
font-family:arial;
height:50px;
}
#dropnav ul li a {
background-color:#808080;
color:#FFFFFF;
text-decoration:none;
line-height:50px;
display:block;
padding-left:36.2%;
width:63.8%;
}
#dropnav ul li a:hover {
background-color:#666666;
}
#dropnav ul li ul li {
width:99.8%;
}
#dropnav ul li ul li a{
background-color:#666666;
}
#dropnav ul li ul li a:hover {
background-color:#333333;
}
#dropnav ul li ul {
visibility:hidden;
}
#dropnav ul li:onclick ul {
visibility:visible;
}
Now I need the :onclick to work so if you could fix it that would be great. Thanks for your help
One way to change visibility onclick is by adding an event attribute to your html tag:
onclick="this.style.visibility='hidden';"
For example, here is your navigation bar with disappearing links:
<div id="dropnav">
<ul>
<li><a>Navigation</a>
<ul>
<li>Home
</li>
<li>Paintings
</li>
<li>Contact
</li>
<li>Bio
</li>
</ul>
</li>
</ul>
</div>
Drop this (it's useless):
#dropnav ul li:onclick ul {
visibility:visible;
}
Add This:
#dropnav ul li.open ul {
visibility:visible;
}
JS:
$('#dropnav ul li').click(function(){
$(this).addClass('open');
});
Just adding a class, which can be further dealt with in plain CSS. This way your application won't be bound by any strict laws.
You can do this with pure css3 by abusing the :not pseudo class. For example you can trigger an animation after an onclick has happened.
Click
<style>
#btn:not(:active) {
/* now keep red background for 1s */
transition: background-color 1000ms step-end;
}
#btn:active {
background: red;
}
</style>
Try it - http://jsfiddle.net/WG4Sf/
Here is a good article on CSS click events and if you should use them. http://www.vanseodesign.com/css/click-events/
You can do something like this
<html>
<head>
<script type="text/javascript">
function change()
{
document.getElementById("d").style.visibility="hidden";
}
</script>
</head>
<body>
Click Me<br/>
<div id="d">This is just example</div>
</body>
</html>
Try this:
$('#dropnav ul li').click(function() {
$(this).parent().css('visibility','visible');
})
try this.
:active is ur required css property
WORKING SAMPLE
I have just changed the visibility property for my convinience. U can change it to what u need exactly.
I am stuck on the creation of a vertical menu with submenu:
<ul>
<li>Home</li>
<li>Pages
<ul>
<li>Subpage</li>
<li>Subpage 2</li>
</ul>
</li>
<li>Contact</li>
</ul>
Clicking on "Pages" the menu should be something similar to this:
The basic mechanic can be achieved like this:
ul li ul {
display: none;
margin-left: 20px;
}
li:hover ul {
display: block;
}
jsFiddle: http://jsfiddle.net/elias94xx/sCXus/
Without the use of images it's somewhat tricky to achieve the effect in your images above, but I got a decent example working:
jsFiddle: http://jsfiddle.net/elias94xx/sCXus/5/
Try This
use this CSS:
ul{
list-style:none;
}
ul li ul{
list-style:none;
display:none;
}
apply jQuery library and this function:
$(document).ready(function(){
$("ul li").click(function(){
$(this).children('ul').show();
});
});