I am using an include file to add the navigation bar to all of my pages. inside the inc file i have my JS css and html table, everything is working except for the js function that is supposed to show the hidden sub links. its been forever since ive coded js so i followed a tutorial and i can not figure out why this isnt working. here is my code::
<script type="text/javascript" src="../js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('li').hover(function () {
$(this).find('ul>li').stop().fadeToggle(200);
});
});
</script>
<style type="text/css">
#nav{
background-color: #282828;
height: 20px;
width: 100%;
float: left;
}
ul{
margin: auto;
padding: 0;
list-style: none;
display: table;
}
ul li {
float: left;
height: 20px;
line-height: 20px;
text-align: center;
}
ul li a{
text-decoration: none;
color: darkgray;
padding: 0 10px;
}
ul li li{
background-color: #282828;
display: none;
}
ul li ul li{
width: 100%;
}
ul li:hover{
background-color: red;
}
</style>
<div id="nav" class="click-nav">
<ul class="ul">
<li>Home</li>
<li>Command Center</li>
<li>Stats</li>
<li>Community
<ul>
<li>Wiki</li> <br>
<li>Forum</li> <br>
<li>Facebook</li> <br>
</ul>
</li>
<li>Updates</li>
<li>About</li>
<li>Support</li>
</ul>
</div>
was an invalid reference to my jquery file. thanks
I've just tried it with jQuery 12.2 and 11.1, which seems to work:
https://jsfiddle.net/2cq1badz/
$('li').hover(function () {
console.log($(this).find('ul>li'));
$(this).find('ul>li').stop().fadeToggle(200);
});
I've also checked you're correctly selecting the drop-down items, so that doesn't seem to be an issue.
Related
I have some code for which I am trying to make a navbar. I have links in the code and I changed them when the page is scrolled up a little. I change the colours ok but cant change on hover to stay permanent? I seem to have tried everything but its like its resetting my css all the time. It works fine with the links but cant seem to change on hover colour to stay the same.
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 10) {
$(".white").css("background", "#362c6e");
$(".white").css("color", "#ffffff");
$(".nav-login").css("color", "#ffffff");
$(".nav-big a:link").css("color", "#ffffff");
$(".nav-more a:link").css("color", "#ffffff");
}
if (scroll < 10) {
$(".white").css("background-color", "rgba(255, 255, 255, 0)");
$(".white").css("color", "#111111");
$(".nav-login").css("color", "#362c6e");
$(".nav-big a:link").css("color", "#362c6e");
$(".nav-more a:link").css("color", "#362c6e");
}
})
})
.image-container-left {
margin-left: 40px;
margin-top: 0px;
}
#nav {
overflow: hidden;
width: 100%;
/* Full width */
border: 0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: left;
list-style: none;
}
.nav-image-left {
border: 0;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 5px;
margin-top: 17px;
margin-left: 5px;
float: left;
list-style: none;
}
.nav-big {
border: 0;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 5px;
margin-top: 37px;
float: left;
list-style: none;
margin-left: 5%;
}
.nav-more {
border: 0;
list-style-type: none;
margin: 0;
padding: 0;
margin-top: 37px;
margin-left: 30px;
;
float: left;
list-style: none;
}
.nav-login {
list-style-type: none;
float: right;
margin-top: 37px;
margin-right: 40px;
color: 362c6e;
}
.nav-big a:hover,
a:visited,
a:link,
a:active {
text-decoration: none;
}
.nav-more a:hover,
a:visited,
a:link,
a:active {
text-decoration: none;
}
.nav-big a:link {
color: #362c6e;
}
.nav-more a:link {
color: #362c6e;
}
.nav-more a:hover {
color: #e73972;
)
.nav-big a:hover {
color: #e73972;
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav" class='container-fluid white hidden-xs hidden-sm'>
<ul>
<li class='nav-image-left'>
<div class='image-container-left'>
<a href=index><img src='images/ctbig.png' height='62' alt='image-left' /></a>
</div>
</li>
<li id="nav-big" class='nav-big'><a href='updating'> About us </a></li>
<li class='nav-more'><a href='updating'> Register new job </a></li>
<li class='nav-more'><a href='updating'> Register business </a></li>
<li class='nav-more'><a href='updating'> Contact us </a></li>
<li class='nav-more'><img src='images/users.png' alt='image-right' width='22' /><a href='updating'> Login </a></li>
<li class='nav-login'>0800 038 6210</li>
</ul>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
Is this what you need?
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
$('#nav').toggleClass('before10',!(scroll > 10)); // toggle Class ad or remove a class considering the second parameter being true or false
$('#nav').toggleClass('after10',(scroll > 10));// toggle Class ad or remove a class considering the second parameter being true or false
})
})
body{
min-height:700px;
}
.image-container-left {
margin-left:40px;
margin-top:0px;
}
#nav {
overflow: hidden;
width: 100%; /* Full width */
border:0;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
float: left;
list-style: none;
}
.nav-image-left {
border:0;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 5px;
margin-top: 17px;
margin-left: 5px;
float: left;
list-style: none;
}
.nav-big {
border:0;
list-style-type: none;
margin: 0;
padding: 0;
margin-right: 5px;
margin-top: 37px;
float: left;
list-style: none;
margin-left:5%;
}
.nav-more {
border:0;
list-style-type: none;
margin: 0;
padding: 0;
margin-top: 37px;
margin-left: 30px;;
float: left;
list-style: none;
}
.nav-login {
list-style-type: none;
float: right;
margin-top: 37px;
margin-right:40px;
color:362c6e;
}
#nav ul li a{
color:blue;
text-decoration:none;
}
#nav.before10 ul li a{
color:blue;
text-decoration:none;
}
#nav.before10 ul li a:hover{
color:grey;
}
#nav.after10{
background:teal;
}
#nav.after10 ul li a{
color:red;
text-decoration:none;
}
#nav.after10 ul li a:hover{
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav" class='before10 container-fluid white hidden-xs hidden-sm'>
<ul>
<li class='nav-image-left'><div class='image-container-left'><a href=index><img src='images/ctbig.png' height='62' alt='image-left' /></a></div></li>
<li id="nav-big" class='nav-big'><a href='updating'> About us </a></li>
<li class='nav-more'><a href='updating'> Register new job </a></li>
<li class='nav-more'><a href='updating'> Register business </a></li>
<li class='nav-more'><a href='updating'> Contact us </a></li>
<li class='nav-more'><img src='images/users.png' alt='image-right' width='22' /><a href='updating'> Login </a></li>
<li class='nav-login'>0800 038 6210</li>
</ul>
</div>
I think the problem is how you are trying to set the css properties.
$(".nav-big a:link") selects the actual elements in the DOM tree, nit the corresponding rule in your .css file. Then, when you call ".css("property", "value")" on those elements, you effectively change their element.style property, which is equivalent to setting that property inline (i.e. `).
Since the specificity of inline styles is higher that that of styles defined in a .css file, your :hover rule in a .css file will not be applied anymore.
There isn't really a way to edit you .css files from either JavaScript or JQuery (which is still just a JavaScript library), so what you should do instead is dynamically add and remove classes as described here.
As a side note, you honestly don't need jQuery for such tasks in 2018. It has its uses, but those are all either advanced or obsolete. Loading a external library bloats your page and is overall frowned upon. .ready can be replaced by just placing your <script> tag at the end of the <body>, and others methods now have direct js counterparts. Please consider switching to native js especially if you are still learning the language.
I am Creating my personal website but I can not get the drop down to work on desktop then when it is on a mobile devise hide nav and click(using js) to show nav. But its not working only on the Index.html
<div class="content">
<div class="header">
<div class="logo">GM
</div>
<span class="menu-trigger">Menu</span>
<nav class="nav clearfix">
<ul class="clearfix">
<li><a class="active" href="index.html">Home</a>
</li>
<li>About
</li>
<li>Portfolio <i class="fa fa-angle-down fa-1"></i>
<ul class="sub-nav">
<li>Music
</li>
<li>Code
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</nav>
<!-- end of Nav -->
</div>
</div>
CSS:
/**Header**/
.nav {
height: 61px;
background: #381120;
}
.logo a{
float: left;
text-decoration: none;
color: #7e7e7e;
font-size: 43px;
padding-top: 11px;
padding-left: 30px;
}
.nav ul {
margin: 0;
padding: 0;
float: right;
}
.nav ul li {
list-style: none;
float: left;
display: block;
padding: 19px;
}
.nav ul li a {
color: #7e7e7e;
text-decoration: none;
font-size: 25px;
}
.nav ul ul.sub-nav {
display: none;
background: #381120;
width: auto;
position: absolute;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul li {
float: none;
padding-left: 24px;
}
.nav ul li a.active {
color: #08a1c7;
}
.nav ul li a:hover {
color: #efefef;
}
and:
.menu-trigger{
padding-top: 16px;
padding-right: 30px;
font-size: 25px;
text-align: center;
display: none;
float: right;
color: #7e7e7e
}
.menu-trigger p{
color: #7e7e7e
}
/**480px**/
#media only screen and (max-width : 480px) {
.menu-trigger{
display: block;
}
.nav, .mobile-nav{
display: none;
}
.nav-expanded{
display: block;
}
.nav ul li{
float: none;
border-bottom: 1px solid #7e7e7e;
}
.nav ul li:last-child{
border-bottom: none;
}
}
Here is the JS sorry I forgot to put it on here:
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
jQuery(".nav").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
You really should be able to animate all of this with just CSS. You don't even need jQuery for this, other than for the click action maybe.
Also, and this may not be the case, but in past I have had to write my click handlers like this to bypass some odd bugs. SlideToggle in jQuery can cause some glitchy effects and its not really a great way to do animated menu's. Try to avoid slideToggle().
$("[your-selector]").on("click",function(){
/// do something...
});
I have created a jsfiddle with your code and its seems to work fine. Its rather unclear from what you ask, But what I guess is that your dropdown doesnt work on mobile screen. A problem could be importing jquery in your HTML file. That might solve your problem
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
jQuery(".nav").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
Nevermind I fix it I added a
<div class="content">///content goes here</div>
twice causing it to break Thank You for all your help still.
I have just (thanks to the help of stack overflow users) created a menu-bar with hyperlinks to sections. Everything works perfectly but there is one strange happening. Every time I click on a link in the menu, the browser will position the page such that the menu bar is just above the view (you have to scroll up to see it again) - in other words it positions me mid-page instead of at the top of the page. (I have a lot of content in the sections which is why I would like to fix it so we always start at the top).
Here is the Html, js and CSS code:
<ul class="tabs">
<li><a class="active" href="#content1"><div>Tab1</div></a></li>
<li><div>Tab2</div></li>
<li><div>Tab3</div></li>
</ul>
<section id="content1">
some content 1
</section>
<section id="content2" >
some content 2
</section>
<section id="content3" >
some content 3
</section>
js code:
$('.tabs').on('click', 'a', function(){
$('section').hide();
$($(this).attr('href')).show();
var $this = $(this),
$ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
CSS code:
section {
display: none;
}
section:first-of-type {
display:block;
}
ul.tabs {
list-style: none;
text-align: center;
}
ul.tabs li {
display: inline-block;
}
ul.tabs li a {
display: inline-block;
width: 100px;
margin-right: 25px;
margin-bottom: 25px;
padding: 5px 5px 5px 5px;
background-color: #ffffff;
border: 1px;
border-style: solid;
border-color: #000000;
text-align: center;
text-decoration: none;
color: #000000;
}
ul.tabs li a:hover {
color: #349cf0;
}
ul.tabs li a.active {
color: #349cf0;
}
You won't be able to see the problem with this code (unless you put in a hell-uv-alot of or content within the tags. However I hope you understand the problem - the code sends you to the top of the section-tag instead of the top of the whole html page. I'm thinking this could maybe be fixed in the js code or perhaps anybody know of a smart fix to the tags in the html?
Thanks in advance!
This is the default behavior of the hyperlink. You can take a look of LINK WITHIN A PAGE. So do not provide id as href.
$(document).ready(function(){
$('.tabs').on('click', 'a', function(){
$('section').hide();
$($(this).attr('data-url')).show();
var $this = $(this),
$ul = $this.parents('ul');
$ul.find('a').removeClass('active');
$this.addClass('active');
});
});
#header {
border-bottom: black 1px solid;
}
section {
display: none;
height: 500px;
border: black 2px solid;
}
section:first-of-type {
display:block;
}
ul.tabs {
list-style: none;
text-align: center;
}
ul.tabs li {
display: inline-block;
}
ul.tabs li a {
display: inline-block;
width: 100px;
margin-right: 25px;
margin-bottom: 25px;
padding: 5px 5px 5px 5px;
background-color: #ffffff;
border: 1px;
border-style: solid;
border-color: #000000;
text-align: center;
text-decoration: none;
color: #000000;
}
ul.tabs li a:hover {
color: #349cf0;
}
ul.tabs li a.active {
color: #349cf0;
}
.content {
margin-top:
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<h1>Header Part</h1>
</div>
<div class="container">
<ul class="tabs">
<li>
<a class="active"
href="javascript:void(0);"
data-url="#content1">
<div>Tab1</div>
</a>
</li>
<li>
<a href="javascript:void(0);"
data-url="#content2">
<div>Tab2</div>
</a>
</li>
<li>
<a href="javascript:void(0);"
data-url="#content3">
<div>Tab3</div>
</a>
</li>
</ul>
<section id="content1" style="background-color:red;">
some content 1
</section>
<section id="content2" style="background-color:green;">
some content 2
</section>
<section id="content3" style="background-color:blue;">
some content 3
</section>
</div>
You can use jquerys element.top or element.position- #px.
https://api.jquery.com/position/
I am using jQuery to create a drop down nav menu and it works fine, but I can not get it to center on my page.
I have tried using align="center" in the div "menu", but that did not work. I then tried aligning it using the css for the div and the lis and uls, but that also did not work.
Here is my code
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
$(document).ready(function () {
$("#menu li").hover(function () {
$(this).children(":hidden").slideDown();
}, function(){
$(this).parent().find("ul").slideUp();
});
});
</script>
HTML:
<div id="menu">
<ul>
<li>Home
</li>
<li>test
<ul>
<li>drop1</li>
<li>drop2</li>
<li>drop3</li>
</ul>
</li>
<li>test
<ul>
<li>drop1</li>
<li>drop2</li>
</ul>
</li>
</ul>
</div>
CSS:
#menu {
height: 30px;
background-color: #26C7FF;
margin-left: 0;
margin-right: 0;
}
#menu li li:hover {
background-color: yellow;
cursor: pointer;
}
#menu ul, #menu li {
list-style-type: none;
padding: 0;
margin: 0;
}
#menu li {
float: left;
width: 120px;
list-style-type: none;
line-height: 30px;
text-align: center;
}
#menu li ul {
position: absolute;
background-color: #26C7FF;
display: none;
}
#menu li li {
float: none;
padding: 2px;
}
#menu a {
color: #000;
text-decoration: none;
}
Use display:inline-block; instead of floating the li elements and then use text-align:center; for the container ul.
#menu > ul > li {
display: inline-block;
}
Here is a working example:
http://codepen.io/taneleero/pen/MwojLV
Wrap it in a container that has a max-width of whatever width you'd like your menu to be:
.container {
max-width: 600px; // Or whatever
width: 100%;
margin: 0 auto;
}
#menu {
height: 30px;
background: #26C7FF;
}
<div class="container">
<div id="menu">
</div>
Please check this code. I think this is what you wanted.
< script type = "text/javascript" >
$(document).ready(function() {
$("#menu li").hover(function() {
$(this).children(":hidden").slideDown();
}, function() {
$(this).parent().find("ul").slideUp();
});
}); < /script>
#menu {
height: 30px;
background-color: #26C7FF;
margin-left: 0;
margin-right: 0;
}
#menu li li:hover {
background-color: yellow;
cursor: pointer;
}
#menu ul,
#menu li {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
position: relative;
}
#menu li {
float: none;
width: 120px;
list-style-type: none;
line-height: 30px;
text-align: center;
display: inline-block;
}
#menu li ul {
position: absolute;
background-color: #26C7FF;
display: none;
left: 0;
right: 0;
}
#menu li li {
float: none;
padding: 2px;
}
#menu a {
color: #000;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="style.css">
<div id="menu">
<ul>
<li>Home
</li>
<li>test
<ul>
<li>drop1
</li>
<li>drop2
</li>
<li>drop3
</li>
</ul>
</li>
<li>test
<ul>
<li>drop1
</li>
<li>drop2
</li>
</ul>
</li>
</ul>
</div>
this is the JSFIDDLE link
Since you're setting your ordered list tags at a fixed width, the following css should fix your problem.
#menu ul {
width: 369px;
margin: 0 auto;
}
Here's a working jsfiddle.
I am facing a problem while using token input in my menu list.
on hover of menu list my sublist opens and in that when i search for tokens input box and after result i wanted to select one token but the window is being closed .. please help
<ul id="navlist">
<li>list one
<ul id="subnavlist">
<li> <input type="text" id = "test" name= "test1" size='6'></test1>
</li></ul>
</li></ul>
my css goes like this
ul#navlist li:hover
{
background-color: #ffffff;
border:1px solid #E46713;
padding-bottom:10px;
}
ul#subnavlist { display: none; }
ul#subnavlist li { float: left; }
ul#navlist li:hover ul#subnavlist
{
display: block;
position: absolute;
font-size: 8pt;
padding-top: 0px;
width:auto;
}
ul#navlist li:hover ul#subnavlist li
{
display: block;
border: 2px;
padding: 0px;
}