We Keep Coding

Menu Fullpage.js

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;
}

Click function doesn't work in my JQuery

$(document).ready(function(){
$("#menu-trigger").click(function(){
$("#menu").slideToggle();
});
});
#menu {
width: 100%;
height: 35px;
}
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
background: blue;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 10px 0 0;
position: relative;
background:blue;
}
ul.topnav li a {
color:red;
padding: 10px 5px;
float: left;
display:block;
font-size: 12px;
text-transform: uppercase;
font-style: normal;
}
ul.topnav li a:visited, ul.topnav li a:active, ul.topnav li a:link {
color: #fff;
text-decoration: none;
}
ul.topnav li a:hover {
background: violet;
color:white;
}
ul.subnav{
display:none;
position:absolute;
top:100%;
padding:0;
}
ul.subnav li{
list-style: none;
float:left;
width:100%;
}
ul.subnav a{
line-height:120%;
padding:10px 15px;
}
ul.topnav li:hover>ul.subnav{
display:block
}
#menu-trigger{
display:none;
}
#media screen and (max-width:600px){
#menu{
display:none;
}
#menu-trigger{
display:block;
}
ul.topnav li{
float:none;
}
ul.topnav li a{
float:none;
border-bottom:2px solid red;
}
}
<span id="menu-trigger">MENU</span>
<div id="menu">
<ul class="topnav">
<li><a>Home</a>
</li>
<li><a>About Us</a>
<ul class="subnav">
<li><a>Introduction</a>
</li>
<li><a>History</a>
</li>
<li><a>Mission/Vision Statement</a>
</li>
</ul>
</li>
<li><a>Basic Education</a>
<ul class="subnav">
<li><a>Introduction</a>
</li>
<li><a>The Basic Ed</a>
</li>
<li><a>About Basic Ed</a>
</li>
</ul>
</li>
<li><a>IB</a>
</li>
<li><a>College</a>
</li>
<li><a>Contact Us</a>
</li>
</ul>
</div>
I can't find what seems to be the problem in my code specifically in jQuery. The click and slideToggle event wont work. What I want is when the screen reach its max-width, horizontal menu will no longer show, instead when you click on MENU slide-up and down will toggle resulting in vertical and mobile friendly navigation menu. I simply followed some tutorials in Youtube but it doesn't work on me.

Try this:
$(document).ready(function(){
$("#menu-trigger").on('click', function(){
$("#menu").slideToggle();
});
});
here you can take a look how it's working when you click on the #menu-trigger link

How to expand and collapse a responsive mobile menu

I have created a responsive menu, all that is left is to make it toggle. I am unsure as how to show the menu when the word menu is pressed. By default the menu is collapsed, then when the menu button is pressed it expands and when the button is pressed again it collapases.
Could someone please help me out as I am new and unsure about this. I have uploaded my project onto jsfiddle. link
http://jsfiddle.net/bLbdavqu/2/
HTML:
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div>
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div><!--/nav-->
CSS:
body {
background:brown;
}
#pull {
display:none;
float:left;
height:auto;
width:100%;
}
#pull img {
float:right;
}
#nav{
float:left;
height:155px;
width:63%;
background:url(../images/top-banner.png) no-repeat;
background-position:bottom;
background-size:100%;
position:relative;
}
#nav ul {
height:auto;
width:100%;
list-style-type:none;
position:absolute;
bottom:0;
*zoom:1;
}
#nav ul li {
float:left;
padding-left:20px;
position:relative;
}
#nav ul li a {
font-family:Trajan-Pro;
font-size:0.9em;
color:#fff;
text-decoration:none;
}
#nav ul li a:hover {
color:#d2aa76;
border-bottom:2px solid #d2aa76;
padding-bottom:5px;
}
#nav ul li:hover > a {
color:#d2aa76;
border-bottom:2px solid #d2aa76;
padding-bottom:5px;
}
/*1st level sub-menu */
#nav ul ul {
display:none;
}
#nav ul li:hover > ul {
height:auto;
width:180px;
display:block;
}
#nav ul ul li:hover > a {
color:#d2aa76;
border-bottom:none;
}
#nav ul ul {
padding:0;
position:absolute;
top:100%;
padding-top:15px;
}
#nav ul ul li {
float:none;
position:relative;
padding:7px 0px;
border-top:1px solid #000;
background: #423d33;
background: linear-gradient(top, #423d33 0%, #4a4843 40%);
background: -moz-linear-gradient(top, #423d33 0%, #4a4843 40%);
background: -webkit-linear-gradient(top, #423d33 0%,#4a4843 40%);
-webkit-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
-moz-box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
box-shadow:0px 5px 14px rgba(50, 50, 50, 0.75);
transition: all 300ms cubic-bezier(0.175,0.885,0.32,1.275) 0;
}
#nav ul ul li a {
font-size:0.8em;
padding-left:15px;
}
#nav ul ul li a:hover {
border-bottom:none;
}
#media screen and (max-width: 1900px) {
#logo {
height:95px;
width:100%;
background:none;
}
#logo h1 {
top:0;
margin:0;
padding-top:10px;
}
#header-container {
height:auto;
}
#pull {
display:block;
}
#nav {
height:100%;
width:100%;
background:none;
margin:0;
padding:0;
clear:both;
}
#nav ul {
height:100%;
position:static;
margin:0;
padding:0;
display:block;
}
#nav ul > li {
float: none;
}
#nav ul li {
padding-left:0px;
}
#nav ul li a {
display:block;
padding: 9px 9px;
position: relative;
z-index:100;
}
#nav ul ul {
position:relative;
top:0;
bottom:0;
margin:0;
padding:0;
}
#nav ul li:hover > ul {
height:auto;
width:100%;
}
#nav ul ul li {
border-top:none;
background: #615f5b;
-webkit-box-shadow:none;
-moz-box-shadow:none;
box-shadow:none;
}
#nav ul ul li a {
display: block;
padding-left:30px;
position: relative;
z-index: 100;
}
#nav ul > li.hover > ul , .nav li li.hover ul {
position: static;
}
}

You can use javascript to change the attribute:
I made a jsfiddle: http://jsfiddle.net/bLbdavqu/3/
function show(){
var show = document.getElementById('the_menu');
show.setAttribute('style','display:inline');
}
You can wrap it inside a div to make it easier and then change the display from none to inline. Question: do you want to give users the change to hide the menu when they click again on menu?
Or, if you are ready to use jquery, just use toggle:
$(document).ready(function(){
$('button').click(function () {
$("#toggle").toggle();
});});
http://jsfiddle.net/bLbdavqu/5/

<div id="nav"><!--nav-->
<div id="pull">
Menu
</div><br/><br/>
<div id="the_menu">
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div><!--/nav-->
</div>
Script
<script>
function show(ValueToggle){
if(ValueToggle==1){
$('#the_menu').show();
$('#pulls').attr('onClick','show(0)');
} else {
$('#the_menu').hide();
$('#pulls').attr('onClick','show(1)');
}
}
</script>

You can use JQuery to toggle Menu http://jsfiddle.net/bLbdavqu/8/
Just Change the CSS of the ul.
Hide List- $( "#mylist" ).css("display","none");
Show List- $( "#mylist" ).css("display","block");

I think you want to show the menu items("Home","About Gnosis",etc) on click of link "menu" and
again hide these items on click of link "menu" . I made a jsfiddle for you http://jsfiddle.net/Tushar490/kL1dgvmr/6/
<div id="nav"><!--nav-->
<div id="pull">
Menu
</div>
<div id="bs-example-navbar-collapse-2">
<ul>
<li>Home</li>
<li class="active">About Gnosis
<ul>
<li>What is Gnosis</li>
<li>Origins of Gnosis</li>
<li>Foundations</li>
</ul>
</li>
<li>Articles</li>
<li>FAQ</li>
<li>Courses</li>
<li>Centres</li>
<li>International</li>
</ul>
</div>
</div><!--/nav-->
Script :-
$(document).ready(function () {
$("#pull").on('click',function () {
$("#bs-example-navbar-collapse-2").toggle();
});
});
In CSS you just need to remove "float:left;" from "#pull" .
Hope this would help to you !!

here is the solution please see the code at
$(document).ready(function(){
$('#test').hide();$('#pull').click(function () {$("#test").toggle();});});
http://jsfiddle.net/bLbdavqu/12/
the updation of your requirements.

sIFR slector for li:hover effect

I have a menu
<div id="nav">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>What We Do</span>
<ul id="sideNav">
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
</li>
<li><span>Studies</span></li>
</ul>
</div>
I am trying to create a pop out menu the CSS that does this is:
#nav ul{
padding: 0;
margin: 0;
}
#nav ul li{
list-style: none;
font-size: 16px;
width:170px;
padding:0px 0px 10px 0px;
}
#nav ul li ul li{
font-size: 13px;
}
#nav ul li ul{
display: none;
}
.showMenu, #nav ul li:hover ul{
width:220px;
padding:7px;
background: #F2F2F2;
border:1px solid #F2F2F2;
display: block;
position: absolute;
left: 85px;
top: 30px;
}
#nav ul li ul li{
padding:2px 0px 2px 0px;
}
I am tring to replace the items within both lists but they have different stlyes. I can replace the top level elements easy enough but its the pop out menu that I can not replace the links on.
my SIFR code:
sIFR.replace(futura, {
selector: '#nav ul li span',
css: ['.sIFR-root {}a{ color:#639463;text-decoration:none; font-size: 16px; font-weight:bold;} a:hover{color:#83C000;text-decoration:underline;}'],
wmode: 'transparent'
});

I think part of your problem is that sIFR needs displaying elements to act on.
If you can't use #font styles, I can telly ou that I've successfully used Cufon in this way on a small job, as seen here: http://www.reneworganicbeauty.com/
It's still a bit finicky, and colour changes take a bit of fiddling, but at least it works ok in menus.

Jquery Hover Effect Doesn't Work in IE, redux

Here's to hoping someone else sees this and can help. This snippet of code works in every browser except for IE. The menu doesn't fade in, it just appears and it looks ugly.
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Kentucky Appalachian Rural Rehabilitation Network</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="jquery.js">
</script>
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#nav li').hover(
function () {
//show submenu
$('ul', this).animate({opacity: "show", }, "slow");
},
function () {
//hide submenu
$('ul', this).fadeOut(250);
}
);
})
</script>
<body><div id="centerColumn">
<div id="header"></div>
<input type="hidden" name="arav" /><ul id="nav">
<li> Home
</li>
<li> Who We Are
</li>
<li> Other box
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</li>
<li> Menu
<ul>
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</li>
<li> Menu
<ul>
<li>State Level</li>
<li>National Level</li>
<li>Community Level</li>
</ul>
</li>
<li> Research</li>
<li> Contact Us
</li>
</ul>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div class="container">
<div id="footer">
Footer<a href="#"/>
</div></div></div></body></html>
css
body {
margin:1em;
padding:0;
height:100%;
background-color:#cccccc;
color:#000000;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
border-style: thin;
}
.img{
float right;
padding-left: 3em;
border:thin black ;
}
#reg{font-family:"Palatino Linotype";
}
#centerColumn {
margin: 0 auto;
padding: 1em;
width: 50em;
text-align: left;
vertical-align: bottom;
background-color: #ffffff;
border: 1px solid #999999;
}
#header {
border-style: thin;
background-position: center;
margin: -1em -1em 0 -1em;
padding: 0 0 0 0;
height: 15.5em;
background-color: #ffffff;
background-attachment: scroll;
background-repeat:no-repeat;
}
#footer {
position:relative;
bottom:0;
margin:4em 0 0 0;
padding: 1em 1em 1em 1em;
height:5em;
line-height:4em;
text-align:center;
font-size:.8em;
background-color:#cccccc;
border-top:1px solid #999999;
}
/*****remove the list style****/
#nav {
margin:0;
padding:0;
list-style:none;
}
/*****LI display inline *****/
#nav li {
float:left;
display:block;
width:7em;
background:#0063dc;
position:relative;
z-index:500;
margin:0 1px;
}
/*****parent menu*****/
#nav li a {
display:block;
padding:5px 5px 5px 5px;
font-weight:700;
height:38px;
text-decoration:none;
color:#696969;
text-align:center;
color:#ffeecc;
}
#nav li a:hover
{
color:#eeeeee;
}
/* style for default selected value */ #nav a.selected {
color:#6699FF;
}
/* submenu */ #nav ul
{
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
#nav ul li
{
width:7em;
float:left;
overflow:hidden;
border-top:1px solid #eeeeee;
}
/* display block will make the link fill the whole area of LI */
#nav ul a
{
display:block;
height:32px;
padding: 7px 4px;
color:white;
}
#nav ul a:hover
{
text-decoration:none;
padding-left:none;
}

If you are trying to animate between two images, like a hover effect on your navigation, then I suggest using jQuery Blend plugin. It works in IE and is very well developed, I haven't found any bugs in it.