I have a question for you, i try to make a new project with fullpage.js.
But, my question is, how to make a menu, i try with :
Problem is, when i click for example on porfolio, it's ok, i'm on the second slide, but.. isn't possible for me to click on another tab
(HTML Part)
<nav>
<ul>
<li data-menuanchor="Accueil">Accueil</li>
<li data-menuanchor="PortFolio">PortFolio</li>
<li data-menuanchor="Contact">Contact</li>
</ul>
</nav>
and for JS part :
<script type="text/javascript">
$(document).ready(function () {
$('#fullpage').fullpage({
sectionsColor: ['', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
anchors: ['Accueil', 'PortFolio', 'Contact'],
});
$.fn.fullpage.setScrollingSpeed(1500);
});
</script>
Thank for helping :)
Ouuups ! I'm sorry to create this post for nothing.. I find the solution.
The solution was to, change in my CSS file.
with, this configuration :
#menu li {
display:inline-block;
margin: 10px;
color: #000;
background:#fff;
background: rgba(255,255,255, 0.5);
-webkit-border-radius: 4px;
border-radius: 4px;
}
#menu li.active{
background:#666;
background: rgba(0,0,0, 0.5);
color: #fff;
}
#menu li a{
text-decoration:none;
color: #000;
}
#menu li.active a:hover{
color: #000;
}
#menu li:hover{
background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
padding: 9px 18px;
display:block;
}
#menu li.active a{
color: #fff;
}
#menu{
position:fixed;
top:0;
left:0;
height: 40px;
z-index: 70;
width: 100%;
padding: 0;
margin:0;
}
Related
I want to make a dynamic list of colors using jQuery and CSS (and ofc php but this is not related to my issue).
There is a problem when they click on 'choose a color' button my color list will appear and if user click on any of them others will get a display none and here is a problem if user try to change a selected color it doesn't work!
<div class="onfocus">
<div class="color-select">
<ul class="ul-color">
<li id="slect-color">choose a color</li>
<li>color1</li>
<li>color2</li>
<li>color3</li>
<li>color4</li>
<li>color5</li>
</ul>
</div>
</div>
$('.ul-color li').on('click',function(){
$(this).css('display','none');
for(var x = 0 ; x < 10; x++){
$('.ul-color li').eq(x).css('left', 90*x+'px');
}
$('.ul-color li').click(function(){
$('.ul-color li').css('display','none');
$(this).css('display','block');
$(this).css('left','20px');
});
});
.onfocus{
position: absolute;
left : 50%;
top :50%;
width: 1700px;
height: 300px;
background-color: #2c3e50;
transform: translate(-50%,-50%);
}
.color-select{
margin-top: 20px;
margin-left: 20px;
}
.color-select ul{
list-style: none;
max-width: 70px;
display: flex;
}
.color-select ul li{
margin-right: 10px;
padding: 10px;
position: absolute;
transition: .5s;
}
.color-select ul li:nth-child(1){
z-index: 10;
background-color: black;
border-radius: 5px;
}
.color-select ul li+li{
left: 20px;
}
.color-select ul li a{
color : #fff
}
.color-select ul li:hover{
background-color: #e74c3c;
border: none;
border-radius: 5px;
}
Before any click :
pic-1
After i clicked on 'choose a color' :
pic-2
if i select any color others will get a display none except the one that we selected and it will get a 'left 20px' too:
pic-3
so now if i want to change my selected color i have to click on my previous one and it should be something like 2nd picture but nothing gonna happen
pic-4
Try this,
HTML
<div class="onfocus">
<div class="color-select">
<ul class="ul-color">
<li id="slect-color">choose a color</li>
<li class="color">color1</li>
<li class="color">color2</li>
<li class="color">color3</li>
<li class="color">color4</li>
<li class="color">color5</li>
</ul>
</div>
</div>
CSS
.ul-color{
list-style-type:none;
display:flex;
}
.ul-color li{
margin:5px 10px;
border-radius:5px;
background:#333;
display:none;
}
.ul-color li a{
text-decoration:none;
display:inline-block;
padding:10px 15px;
color:#FFF;
border-radius:5px;
}
.ul-color li a:hover{
background:#e74c3c;
}
#slect-color{
display:inline-block;
}
Javascript
$('#slect-color').on('click',function(){
$('ul li').show();
});
$('.color').on('click',function(){
$('.color').hide();
$(this).css('display','block');
});
This is a bit too complex to handle everything with display: block and display: none. I slightly changed your code to add a few classes:
ul.initial is you initial state, where "Choose a color" is visible
ul.opened is when all colors are shown, for one to be picked
li.selected is the color you've picked
What you want is that any li shows up if:
We're in the initial state, and the li is the "Choose a color" one
We've opened the list, and the li is NOT the "Choose a color" one
The li is the one selected
Here's the CSS part that is interesting for you:
.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
display: block;
}
And below, a working snippet based on your code, with my improvements:
$('.ul-color li').on('click',function() {
var list = $('.ul-color');
if (!list.hasClass('opened')) {
// Show all colors
$('.ul-color li').removeClass('selected');
} else {
// A color has been picked
$(this).addClass('selected');
}
list.toggleClass('opened');
list.removeClass('initial');
});
.onfocus{
/* Be careful, this part one changed only to be visible in the snippet */
position: absolute;
width: 100%;
height: 300px;
background-color: #2c3e50;
}
.color-select {
margin-top: 20px;
margin-left: 20px;
}
.color-select ul {
list-style: none;
display: flex;
}
.color-select ul li {
margin-right: 10px;
padding: 10px;
display: none;
z-index: 10;
background-color: black;
border-radius: 5px;
}
.color-select ul.initial #select-color,
.color-select ul.opened li:not(#select-color),
.color-select ul li.selected {
display: block;
}
.color-select ul li a {
color : #fff
}
.color-select ul li:hover{
background-color: #e74c3c;
border: none;
border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="onfocus">
<div class="color-select">
<ul class="ul-color initial">
<li id="select-color">choose a color</li>
<li>color1</li>
<li>color2</li>
<li>color3</li>
<li>color4</li>
<li>color5</li>
</ul>
</div>
</div>
What I'm trying to accomplish is when I hover over a link, it will make the other links opacity: .1 while keeping that link color the same.
What I tried doing is a:hover ~ a, but it isn't working. I created a new jsfiddle with a basic <a href=""> and it works fine but I'm not understanding why this isn't.
http://codepen.io/jzhang172/pen/OMRqpK
#import url("http://fonts.googleapis.com/css?family=Ubuntu+Condensed");
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html{
background: url('img/congruent_pentagon.png');
}
body{
margin:0px;
}
#wrapper{
height: auto;
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
margin-top: 2em;
margin-bottom: 2em;
height: 700px;
background: transparent;
font: 25px/24px normal 'Ubuntu Condensed', sans-serif;
}
a{
text-decoration: none;
}
.social{
display: inline-block;
position: relative;
width: 100%;
padding: 16px;
margin-bottom: 16px;
margin-right: 16px;
background-color: rgba(231, 231, 231, 0.6);
box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.25);
}
nav{
padding-top: 8px;
padding-left: 8px;
padding-right: 8px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline;
}
nav ul li a:hover{
opacity: 0.7;
}
nav ul li a.email{
border-left: 50px solid #c9182c;
color: #c9182c;
}
nav ul li a.twitter{
border-left: 50px solid #00a0d1;
color: #00a0d1;
}
nav ul li a.facebook{
border-left: 50px solid #365998;
color: #365998;
}
nav ul li a.github{
border-left: 50px solid #4183c4;
color: #4183c4;
}
nav ul li a.google{
border-left: 50px solid #db4a39;
color: #db4a39;
}
nav ul li a.instagram{
border-left: 50px solid #634d40;
color: #634d40;
}
nav ul li a.tumblr{
border-left: 50px solid #34526f;
color: #34526f;
}
nav ul li a.scriptogram{
border-left: 50px solid #0088cc;
color: #0088cc;
}
nav ul li a.linkedin{
border-left: 50px solid #0e76a8;
color: #0e76a8;
}
.container{
width:100%;
text-align:center;
padding-top:20px;
padding-bottom: 20px;
}
.container h1{
font-family: 'EB Garamond', serif;
font-size:55px;
width:500px;
margin:0 auto;
border-top:1px solid black;
border-bottom:1px solid black;
font-weight:0px;
}
.container span{
width:100px;
height:300px;
}
h2{
font-family: 'Lora', serif;
text-align:center;
font-size:25px;f
font-weight:normal;
color:#0B437D;
}
a.tumblr:hover ~ a.social{
opacity:.1;
}
<div id="wrapper">
<nav>
<ul>
<li><a class="social tumblr" href="#" target="_blank"><img src="img/svg/home.svg">Home</a></li>
<li><a class="social google" href="#" target="_blank"><img src="img/svg/prod.svg">Products</a></li>
<li><a class="social google" href="#" target="_blank"><img src="img/svg/about.svg">About</a></li>
<li><a class="social facebook" href="#" target="_blank"><img src="img/svg/fb.svg">Facebook</a></li>
<li><a class="social twitter" href="#" target="_blank"><img src="img/svg/twitter1.svg">Twitter</a></li>
<li><a class="social instagram" href="#" target="_blank"><img src="img/svg/insta.svg">Instagram</a></li>
</ul>
</nav>
</div>
As mentioned in other answers, you can't achieve the effect you want with the general sibling combinator (~).
However, I think the effect can still be achieved with pure CSS. Try this:
ul:hover li:not(:hover) { opacity: .1; }
Revised Demo
Explanation
li:not(:hover) will match all list items that are not hovered. But we can't use this alone, because then all list items will have opacity: .1 by default.
So we begin the selector with ul:hover, which creates a descendant selector saying: don't apply li:not(:hover) unless the ul is hovered first.
The general sibling combinator (~) matches siblings, your links are not siblings.
The list items containing them are siblings, which makes the links themselves cousins.
There is no way to describe a relationship between the links using CSS (there is no parent combinator).
The closest you can come would be to use li:hover ~ li > a.
What I tried doing is a:hover ~ a, but it isn't working. I created a
new jsfiddle with a basic and it works fine but I'm not
understanding why this isn't.
General sibling combinator selector ~ selects elements that have same parent element.
8.3.2. General sibling combinator
The general sibling combinator is made of the "tilde" (U+007E, ~)
character that separates two sequences of simple selectors. The
elements represented by the two sequences share the same parent in the
document tree and the element represented by the first sequence
precedes (not necessarily immediately) the element represented by the
second one.
At
a.tumblr:hover ~ a.social {
opacity:.1;
}
a.social elements do not have same li parent as a.tumbler element
So, you're trying to do something similar to this :
a:hover, li>a.social{
opacity: .1;
}
With all the "a elements" already visible and then the "hovered" element triggering the others to "disappear"
I would like to have my hovering/sticky navigation bar appear when a reader/web visitor has scrolled passed the blog header, instead of the navigation bar appearing at all times, as it currently does. I'm not entirely sure how to achieve this affect as I have done research on this but to no avail, but I am certain it is completely doable. I have seen this effect on two blogs, one of which is hosted on Blogger, the URL of these sites are as follows : http://www.theweekendattic.com/ and http://mediamarmalade.com/. The URL to my own blog is as follows : http://www.blankesque.com
The CSS and HTML coding for the hovering navigation bar currently on my site is detailed below :
#wctopdropcont{
width:100%;
height:45px;
display:block;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position: fixed;
background:#f5f5f5;
border-bottom: 1px solid #f0f0f0;
}
#wctopdropnav{
float: left;
width:97%;
height:7px;
display:block;
padding:0px;
}
#wctopdropnav li{
float:left;
list-style:none;
line-height:13px;
padding: 10px 6.5px 6.5px 6.5px;
background:#f5f5f5;
}
#wctopdropnav li a, #wctopdropnav li a:link{
color:#494949;
float: left;
display:block;
text-transform: uppercase;
font-size: 10.5px!important;
font-family: karla, arial!important;
padding: 5px;
text-decoration:none;
font-weight: normal!important;
letter-spacing : 0.09em;
}
#wctopdropnav li:first-child a {
font-weight: bold!important;
margin-left: 20px;
}
#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a {
color: #a6a6a6;
font-weight: normal;
padding: 5px;
background: #f5f5f5;
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
font-size: 10.5px;
background:#f5f5f5;
color: #494949;
width: 90px;
margin: 0px;
padding: 0;
line-height: 15px;
position: relative;
}
#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
color: #a6a6a6;
background: #f5f5f5;
filter: #f5f5f5;
}
#wctopdropnav li:hover, #wctopdropnav li.sfhover{
position:static
}
#socialmediabuttons {
display: block;
float: right;
position: relative;
margin: 0.9% -1% 0 0;
}
#socialmediabuttons a {
padding: 0 0 0 18px;
}
#socialmediabuttons a:hover {
opacity: 0.4;
filter: alpha(opacity=40);
}
</style>
<div id='wctopdropcont'>
<div id='wctopdropnav'>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/search/label/Advice'>Advice</a></li>
<li><a href='http://www.blankesque.com/search/label/Beauty'>Beauty</a></li>
<li><a href='http://www.blankesque.com/search/label/Fashion'>Fashion</a></li>
<li><a href='http://www.blankesque.com/search/label/Lifestyle'>Lifestyle</a></li>
<li><a href='http://www.blankesque.com/search/label/Skin & Hair'>Skin & Hair</a></li>
<div id='socialmediabuttons'>
<a href='https://www.pinterest.com/blankesque' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/91F98FB1-242C-428E-A472-50F7D511C38E_zpsaiuhz6yb.gif' width='20px'/>
</a>
<a href='https://www.twitter.com/' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/923FF7F8-5AA7-4676-935F-2CB5FF465122_zpsmctqg100.gif' width='20px'/></a>
<a href='http://www.bloglovin.com/blogs/blankesque-14431777' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/7CC1080E-1911-4D0B-B99F-55109C044D54_zps2ky5dfgt.gif' width='20px'/></a>
<a href='https://instagram.com/' target='_blank'><img height='20px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/C6567CDB-FB01-4F2D-A2FD-D0D875A30B80_zps5mgdqong.gif' width='20px'/></a>
</div>
</div></div>
You can use jQuery fadein/fadeout in scroll event:
$(document).ready(function(){
$(".navbar").hide();
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.navbar').fadeIn();
} else {
$('.navbar').fadeOut();
}
});
});
});
I am trying to add a dropdown navigation on my navigation links so far it has been great but the only issue now which I can't work out the contact is not staying next to the Community instead it's going down one line how can i force it to stay inline with everything else?
and the drop is floating to the left for some reason so how can I bring that under the dropdown (I plan to add multiple drop downs)
<style>
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
float:right;
z-index:1;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
</style>
<style type="text/css">
ul {
list-style: none;padding: 0px;margin: 0px;
}
ul li {
display: block;position: relative;float: left;border:1px solid #000
}
li ul {
display: none;
}
ul li a {
display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;
}
ul li a:hover {
background: #f00;
}
li:hover ul {
display: block; position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #f00;
}
li:hover li a:hover {
background: #000;
}
#drop-nav li ul li {
border-top: 0px;
}
</style>
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="main.css" type="text/css" />
<title>Static Navigation</title>
</head>
<body>
<div id="navigation">
Home
About
Social
Community
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</div>
</body>
I added everything on one page so you can easily look at it and help with the problem
Thanks ;)
Add display: inline-block to your <li>.
JSfiddle Example
Well, if you are sure about width of navigation then dont go with "width:100%; " try to give width exactly where it supposed to be fit. Ex. Width: 900px;
You should put the all navigation links inside li tags,
<body>
<div id="navigation">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Social
</li>
<li>Community
</li>
<li>Contact
<ul>
<li>General Inquiries
</li>
<li>Ask me a Question
</li>
</ul>
</li>
</ul>
</div>
</body>
JSFiddle Example
How can I create a dropdown menu similar to xenforo, which will automatically close after 2 seconds?
I've tried searching but unfortunately couldn't find any proper solution.
But I don't know how to and what code to put to achieve like; 1. The drop down menu open after 2 seconds if the mouse cursor hovers over the main menu link for 2 seconds. 2. The drop down closes if the mouse cursor is away from the drop down for 2 seconds.
Thanks!
Here is Jsfiddle;
Try this:
$(document).ready(function(){
$("#sub-menu li").hide(); // Hide in order to fadeIn to work
$("#main-menu ul").hover(
function(){
$("#sub-menu li").fadeIn(slow);
},
function(){
$("#sub-menu li").fadeOut(slow);
});
});
You can use jquery to use this functionality. Instead of waiting for 2 seconds you can use fade out slow so that users can know something will happen.
$(document).ready(function(){
$("#sub-menu").hide(); // Hide in order to fadeIn to work
$("#main-menu").hover(
function(){
$("#sub-menu").fadeIn(slow);
},
function(){
$("#sub-menu").fadeOut(slow);
});
});
<html>
<head>
<style>
.dd_menu {
background: none;
padding: 0px;
margin:0;
list-style-type:none;
height:10px;
border: none;
font-size: 11px;
font-family: "Candarab";
}
.dd_menu li {
background: none;
float: left !important;
height:20px;
margin-left: 1px;
margin-top: 4px;
}
.dd_menu li a {
padding: 15px 5px;
display:inline;
color:#000;
text-decoration:none;
font:11px arial, verdana, sans-serif;
}
.dd_menu li:hover a {
text-decoration:none;
padding: 15px 5px;
}
.dd_menu ul {
position:absolute;
left:-9999px;
top:9px;
list-style-type:none;
text-decoration: none;
float: left !important;
}
.dd_menu li:hover {
position:relative;
background:#176093;
text-decoration: none;
z-index: 1000;
}
.dd_menu li:hover ul {
left:0px;
top:20px;
background:lavender;
padding: 3px 3px;
border:1px solid grey;
width:160px;
text-decoration: none;
}
.dd_menu li:hover ul li {
height:18px;
border:none;
}
.dd_menu li:hover ul li a {
height:18px;
padding:0px;
display:block;
font-size:11px;
width:158px;
line-height:18px;
text-indent:5px;
color:#444;
background-color:lavender;
text-decoration:none;
border:1px solid transparent;
}
.dd_menu li:hover ul li a:hover {
height:18px;
background:silver;
color:#000;
float: left;
border:solid 1px #444;
}
</style>
</head>
<body>
<ul class="dd_menu">
<li>Main Menu <span class="smallesttext">▼</span>
<ul>
<div align="left">
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
<li>Drop Down Link</li>
</div>
</ul>
</li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".dd_menu li a").hover(
function(){
$(".dd_menu li ul div li a").hide().fadeIn('slow');
},
function(){
});
$("ul div li").hover(
function(){
$(".dd_menu li ul div li a").show();
},
function(){
;
});
});
</script>
</body>
</html>
Try this. Similarly add what you want on mouse out. If it helped think about accepting the answer.