I am trying to get the current menu item highlighted, I searched various sited for a solution but I just can't seem to make it work. I hope you can help me!
I have this now:
<div class="menu">
<ul class="highlight">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
.menu a{
background-color: #F2F2F2;
color: black;
font-size: 15px;
font-weight: bold;
padding: 10px 10px;
}
.active {
color: black;
}
.menu li {
display: inline;
opacity: 0.5;
}
.menu li:hover {
opacity: 1;
}
I know I have to add the class .active to the menu only whatever I try .menu li keeps overriding it. I really don't know what to do now.
in jquery
<script type="text/javascript">
jQuery(document).ready(function($){
// Get current url
// Select an a element that has the matching href and apply a class of 'active'. Also prepend a - to the content of the link
var url = window.location.href;
$('.menu a[href="'+url+'"]').addClass('current_page_item');
});
</script>
you could add an active class via jQuery if you have a menu that changes tabs without redirecting to a new page
jQuery:
$('.menu a').click(function(event){
event.preventDefault();
$('.menu a').removeClass('active')
$(this).addClass('active');
});
CSS:
.menu a.active {
color: red;
}
Or you could simply add .active class to the new page link that should be active.
http://jsfiddle.net/1ruy1t2h/3/
You can try 2 things:
1. put css for .active after .mennu li.
2. use !important in .active class. eg. .active {color:black !important;}
This should fix your issue.
If problem persists, create a jsfiddle of the issue and send back link.
The HTML could look like this:
<div class="menu">
<ul>
<li>Home</li>
<li class="active">About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</div>
And the CSS could look like this:
.menu li a {
color: black;
font-size: 15px;
font-weight: bold;
}
.menu li.active a {
color: red;
}
.menu li a:hover {
color: blue;
}
This is a fiddle to demonstrate the code: http://jsfiddle.net/e01mvmgz/
Related
I am having a little difficult creating a navbar that when clicked it opens a small window on the same page like on the image.
Create the small window as it's own div:
<div id="myID"> This content will show when I click the navbar</div>
Add the following CSS:
#myID{
display: none;
}
Then use some script to show/hide the element:
$(document).ready(function(){
// change #nav to whatever the ID of the nav element is.
$('#nav').on('click', function(){
// show/hide pop up on click
$('#myID').toggle();
});
});
You can create a Navbar like this. This is the only dummy. In given image, they have one fix element and when you click on nav element according to that they are updating the content of that element.
$('#myNav').find('li a').click(function (e) {
$('li.active').removeClass('active');
$(this).parent('li').addClass('active');
$('#main').html($(this).html());
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #567;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ccc;
}
.active {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myNav">
<li class="active">Home</li>
<li>Service</li>
</ul>
<div id="main">
Home
</div>
It will help you to create a nav bar.
Please can someone tell me how to put a input text box in a dropdown just as this :-
this pic was using bootstrap. I dont want bootstrap just want to use html/css and javascript maybe? pleas ehelp me i stuck on this quite long.
Code: http://codepen.io/anon/pen/OyQYmN
HTML tags can be nested in eachother. Given this, you can change the dropdown's HTML:
<ul class="dropdown-menu">
<li>An option</li>
<li>Another option</li>
<li>Something else here</li>
</ul>
to include the <input type="text">.
To do this without bootstrap you will have to make your own CSS that will treat a list as a drop-down.
-one way to do this is explained here http://www.instructables.com/id/How-to-Create-Custom-CSS3-Dropdown-Menus-CSS-Drop/?ALLSTEPS
now that you have a list that is treated like a drop down, you can add any element you want in it.
I created a demo that uses pure CSS3 as a dropdown menu and added an input for you. Here is the code to accomplish this, demo is at the bottom.
/* Set Dropdown Display to None*/
nav ul ul {
display: none;
}
/* Display Dropdown on hover*/
nav ul li:hover > ul {
display: block;
}
ul li{
display: inline-block;
}
ul li a {
padding: 20px;
}
ul li a:hover{
text-decoration: none;
}
nav ul ul {
background: #222222;
border-radius: 0px;
position: absolute;
}
nav ul ul li{
padding: 15px 0;
}
nav ul ul li a{
color: #fff;
opacity: .5;
}
nav ul ul li a:hover{
color: #fff;
opacity: 1;
}
CSS3 Dropdown Menu: DEMO
I have this:
<section class="header">
<div class="holder">
<span class="name">Joe Doe</span>
<nav class="">
<ul class="">
<li>Do Something</li>
<li>Do Something Else</li>
<li>Who knows</li>
</ul>
</nav>
</div>
</section>
My script to target that and add class.
$(document).ready(function(){
$(".header nav ul li a").click(function(e){
$(this).addClass('active');
});
)};
Update Css:
.header nav ul li a{
font-size: 15px;
text-transform: uppercase;
color: #959393;
text-decoration: none;
}
.header nav ul li a:hover{
color: #fff;
}
.active{
color: red;
}
The problem:
When I click on the link, it does get the red color, but it instantly change back to the original color and the link still with the class, maybe because the page is reloading or something ?.
I can't use preventDefault() because I need those links to behave as links.
If it gets red when you add !important, your problem can be fixed when you understand css specificity
Check the image below.
a is less specific. #whatever #whatever is more specific and wins.
You can do this with straight-up CSS - no js/jQuery needed. Also, as long as you follow the same specificity, there's no need to append your CSS with !important.
.header nav ul li a{
font-size: 15px;
text-transform: uppercase;
color: #959393;
text-decoration: none;
}
.header nav ul li a:hover{
color: #fff;
}
.header nav ul li a:visited{
color: red;
}
.header nav ul li a:active{
color: red;
}
If the page is reloading, your page is losing the state and the class added by the click will be lost.
To get around that, you have to maintain the state of the page somehow.
One way would be to use sessionStorage and you will need ids for these links.
$(document).ready(function(){
//reapply current active link (if found)
if (!!sessionStorage.activeLink) {
$("#" + sessionStorage.activeLink).addClass('active');
}
$(".header nav ul li a").click(function(e){
//keep track of which link was clicked.
sessionStorage.activeLink = $(this).prop("id");
$(this).addClass('active');
});
)};
I need to finish javascript for load html page into div. I want load page1,page2 and so on into div id="content". If someone help me I will grateful. Thanks
Here is jsfiddle of this code
HTML
<div id="menu">
<nav>
<ul>
<li ><a class="active" href="1.html" ><b>Page1</b></a></li>
<li ><a href="2.html" ><b>Page2</b></a>
</li>
<li ><b>Page3</b>
</li>
<li ><b>Page4</b></li>
<li ><b>Page5</b></li>
</ul>
</nav>
</div>
<div id="content"> </div>
CSS
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: rgb(1, 1, 1);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
font-family: Times New Roman;
font-size: 70%;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li {
float: left;
font-family: Arial;
font-size: 1;
}
nav ul li a:hover, nav ul li a.active, nav ul li a.visited {
background: rgb(177, 2, 10);
}
nav ul li:hover a {
color: rgb(255, 255, 255);
}
nav ul li a {
display: block;
padding: 5px 45px;
color: rgb(255, 255, 255);
text-decoration: none;
position: relative;
}
#menu {
position: relative;
width: 780px;
height: 35px;
left: 50%;
margin-left: -388px;
overflow: hidden;
top: -20px;
}
#content {
position: relative;
float: center;
width: 770px;
height: 670px;
clear:both;
margin: 0 auto;
border-radius: 7px;
overflow: hidden ;
top: 0px;
border: 3px solid black;
}
JAVASCRIPT
$(document).ready(function(){
$('nav ul li a').click(function(){
$('nav ul li a').removeClass('active');
$(this).addClass('active');
});
});
Assuming your href reference the file with the contents that you want to show, you can use .load(). You can get the href property using .prop().
Prevent the default action (redirecting to a new page) when your anchors are clicked.
You may also want to trigger the this functionality on page load for the .active nav button. I've added a filter and a click trigger afterwards for this reason.
$(document).ready(function () {
var $navAnchors = $('nav ul li a');
$navAnchors.click(function (e) {
var $this = $(this);
e.preventDefault();
$navAnchors.removeClass('active');
$this.addClass('active');
$('#content').load($this.prop('href'));
}).filter('.active').click();
});
Notice I've assigned your matching jQuery collection to a variable, to save you making repeat selections. This way nav ul li a is only searched for once, on DOM load.
Use $.get.
$(document).ready(function(){
$('nav ul li a').click(function(e){ // when a nav link ('a' tag) is clicked...
$('nav ul li a').removeClass('active'); // remove the css class "active" from any nav links.
$(this).addClass('active'); // add the css class "active" to the one we clicked
e.preventDefault(); // <-- important! // prevent the page from navigating away
var page = this.href; // get the url the link would normally go to
$.get( page, function( data ) { // in the background, get the content of the page for the link we have clicked
$( "#content" ).html( data ); // load the content we have into the element with id "content"
});
});
});
If you're saying that the page is empty when you first load it, that's expected. If you want it to load something, you'll need to manually fire off the click event when the page loads.. something like:
$('nav ul li a.active').click(); // Get the nav link which has class "active", and fire the click() event.
... should do the trick.
Note -- fiddle won't work, as it doesn't support AJAX stuff very well.
Second Note - George's answer is a simpler version of this. Use that. :)
So, I have DOM that looks like this:
<ul id="nav">
<li><a>Hello</a></li>
<li>
<a>OuterMenu</a>
<ul>
<li><a>InnerMenu1</a>
<ul><li><a>InnerMenu2</a></li><li><a>Item 1</a></li><li><a>Item 2</a></li></ul>
</li>
</ul>
</li>
</ul>
which looks like this:
+Hello +OuterMenu
----InnerMenu1--------------InnerMenu2
----Other list item Item 1
Item 2
That is, the first menu is horizontal, the next menu is directly below the first menu, and all subsequent inner menus appear directly to the right [see example here].
This works fine, but I need the hover styles for each outer menu to persist as each inner menu is selected. When the user is hovering over Item 1, Item 1, InnerMenu, and OuterMenu should be highlighted, and when the user moves off of the whole menu tree, then and only then should OuterMenu no longer be highlighted. Is there a better way to do this than trying to manage a hover and mouseout event on every single list item?
I'm looking for a clean implementation here.
Check out Stu Nicholls great css-only work on just this issue.
I don´t know what you have already, but if you use something like:
#nav > li:hover > a {
// outer menu highlight
}
it should highlight the outer menu also when you are on a sub-menu item.
The same technique can be applied to all levels, but it depends on your browser compatibility requirements as li:hover will not work in older IE versions.
For completeness
/* second level */
#nav > li > ul > li:hover > a {
}
/* third level */
#nav > li > ul > li > ul > li:hover > a {
}
Simply using the :hover psuedo-class on your li will apply even when you are over a descendant element. Here's a working example showing that this is true: http://jsfiddle.net/eMyHE/; hover over InnerMenu2 and you'll see InnerMenu1 and OuterMenu highlight.
Also, you might be interested in my 8-years-old CSS-only hierarchical menu tests, part of some ancient code that uses JavaScript for hierarchical menus.
This isn't my work, I'm just passing it on. It looks like it's the same answer as JakeParis's, but in JSFiddle form. http://jsfiddle.net/XPE3w/7/ This is for HTML with a ul>li>a structure (see the link if this doesn't make sense).
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
li:hover li a:hover {
background: #95A9B1;
}