what is the css of current link like when somebody goes to ABOUT US page then about us color changed to red.... then going to CONTACT US page then about us color change to default and CONTACT US color change to red....
please help i am new designer......
use :hover in css
replace li in example with whatever element you use in your actual code
eg.
li:hover{backgroundcolor:Red;}
li tag in case you design menu like
<ul>
<li> Menu1</li>
<li> Menu2</li>
</ul>
Whwn you click on specific menu, that perticular page will be open.
then just do simple thing,
write class for active.
apply this, for home page
for About Us page active class attribute to About Us li
<ul>
<li class="active">Home</li>
<li>Projects</li>
<li>About Us</li>
</ul>
You can't use JUST CSS to determine which page your user currently is - it just won't do it. You have to adjust your markup to add a hook of some kind that your CSS can use. Like so -
<ul id="nav">
<li>About Us</li>
<li>Contact</li>
</ul>
If you're building a static HTML site, you can manually change the HTML on each page to reflect the current page in the menu.
If you're building something more complex, you will probably need to rely on PHP or JavaScript to figure out the current page. This script is a little old (it's from Jeremy Keith's "DOM Scripting"), but it will do the job:
function highlightPage(id){
//make sure DOM methods are understood
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById(id)) return false;
var nav = document.getElementById(id);
var links = nav.getElementsByTagName('a');
for (var i=0; i < links.length; i++){
var linkurl = links[i].getAttribute('href');
var currenturl = window.location.href;
//indexOf will return -1 on non-matches, so we're checking for a positive match
if (currenturl.indexOf(linkurl) != -1) {
links[i].className = "here";
var linktext = links[i].lastChild.nodeValue.toLowerCase();
document.body.setAttribute("id",linktext);
}
}
}
addLoadEvent(function(){
highlightPage('nav');
});
function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function(){
oldonload();
func();
}
}
}
This script would go in an externally linked javascript file.
Give the body an id name <body id="about-us">. Your link needs an id, too <a href="#" id='this-link">. Then:
#about-us #this-link {
color:red;
}
#contact-us #this-link {
}
Related
I want to active menu item on the current URL , now its my HTML :
<ul class="header-tools nav navbar-nav">
<li class="mysetting">
<a class="link-menu-active" href="">first title</a>
</li>
<li class="mysetting">
<a class="link-menu-active" href="">second title</a>
</li>
<li class="mysetting">
<a class="link-menu-active" href="">third title</a>
</li>
</ul>
and it's my jquery code :
$(".header-tools.nav.navbar-nav li").each(function() {
var navItem = $(this);
if( $(navItem).find("a").attr("href") == location.href ) {
navItem.addClass("active");
}
});
or it :
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".header-tools.nav.navbar-nav li a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
but none of them doesn't work , what should I do ?
So Thanks
For this exact use case, you can check if the current path matches or contains the anchor href and act accordingly.
$('.mysetting').each(function() {
var path = window.location.pathname,
href = $(this).find('a').attr('href'),
exactMatch = (path === href), // URL is the same as anchor. Useful when your path can contain the href of multiple links
closeMatch = (path.indexOf(href) !== -1); // URL contains anchor.
// Useful when you don't know if query strings and other crap will be appended/prepended to your links
if (exactMatch /* or closeMatch depending on your preference*/) {
$(this).addClass('active');
}
})
Although, as already noted in the comments above, WP has built-in nav functions that handle exactly this kind of situation and are a lot more robust than any few lines of javascript you can come up with.
My Joyride works great. It starts after page load. It stops when one clicks the stop button or finishes the tour. My restart link restarts the joyride tour. Only...
Adding the Joyride setting, cookie_monster: true prevents the tour restarting on every visit. Good! Unfortunately, it also prevents the restart link from working. The behavior makes sense. The start function does not know whether it is called on page load or from the link. The link has to use some other method, or set something to bypass the cookie check.
Do you know the magic to enable a user to start the Joyride after it has been hidden by the cookie_monster show-only-first-time device?
Body markup:
<a href='#', data-joyride-restart>tips</a>
<p id='first-stop'>First stop content</p>
<p id='second-stop'>Second stop content</p>
<ol class='joyride-list' data-joyride data-joyride-name='my_name',
data-joyride-autostart='true'>
<li data-id='first-stop', data-text='Next'>
<p>First stop tip</p>
</li>
<li data-id='second-stop', data-text='Next'>
<p>Second stop tip</p>
</li>
<li data-text='End'>
<p>Last stop modal tip</p>
</li>
</ol>
Javascript:
;$(function() {
var tour_root = $('ol[data-joyride]')
if (tour_root !== undefined){
var attr = tour_root.attr('data-joyride-name');
var cookie_name;
if (attr !== undefined){
cookie_name = attr;
} else {
cookie_name = 'joyride';
}
$(document).foundation({
joyride : {
'cookie_monster': true,
'cookie_domain': 'domain.com',
'cookie_name': cookie_name
}
});
attr = tour_root.attr('data-joyride-autostart');
if (attr !== undefined && attr.match(/true/i)) {
$(document).foundation().foundation('joyride', 'start');
}
}
$('a[data-joyride-restart]').on('click', function (e){
e.preventDefault();
$(document).foundation().foundation('joyride', 'start');
});
});
Writing the question helped me work out the trick. (I'll leave it posted because I didn't find any good examples for this behavior.)
$('a[data-joyride-restart]').on('click', function (e){
e.preventDefault();
$(document).foundation({
joyride : {
'cookie_monster': false
}
}).foundation().foundation('joyride', 'start');
});
The code resets the cookie-monster setting before asking Joyride to start.
If there is a better way, please share the love!
<li>#Html.ActionLink("Contact Us", "Contact", "Home")</li>
<li>Services
<ul>
<li>#Html.ActionLink("IT", "IT", "Home")
<ul>//Dropdown
<li>#Html.ActionLink("Data Backup", "DataBackup", "Home")</li>
</ul>
</li>
For example this is my menu my css class is "selected" for active link.. I want to use it at the easiest way. Can any one help me for MVC4.. I have looked some solutions but don't have much knowledge to use it..
<ul class="#{booleanForThisIsSelected ? "selected" : "";}">//Dropdown
I use the following technique all the time, using jQuery
<script type="text/javascript">
var currentLocation = window.location;
$(function () {
$('.menu li a').each(function () {
if (this.href == currentLocation) {
$(this).parent().addClass("current");
}
});
});
</script>
This block at first gets the current page url, then it gets all the menu anchors and compares each one with the current page url, once it finds a match, it gives the matching anchor a special class current which should indicate the current page link.
Please note that the selector $('.menu li a') should be changes to match your own structure so it can get the menu items correctly.
Hope this helps, let me know if you need anything else.
I would recommend you to use MvcSiteMapProvider MVC4.
You install the nuget package.
Then you add links according to your site structure to the Mvc.Sitemap-file.
Now you should be able to use the MenuHelperModel.cshtml-file to define the rendering behaviour of all links in your sitemap (including currently selected ones), an example of this could look like this:
#model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
#using System.Web.Mvc.Html
#using MvcSiteMapProvider.Web.Html.Models
<ul id="menu">
#foreach (var node in Model.Nodes) {
string classes = node.IsCurrentNode | node.IsInCurrentPath | node.Children.Any(n => n.IsCurrentNode)
? "selected" : "";
<li class="#classes">#Html.DisplayFor(m => node)
#if (node.Children.Any()) {
#Html.DisplayFor(m => node.Children)
}
</li>
}
</ul>
All you have to do now is ensure your links show up on your page, best location to put it should be your Layout-/Master-Page.
There you could for example add a call to
#Html.MvcSiteMap("MvcSiteMapProvider").Menu(0, true, false, 1)
Which renders only the first level of your sitemap.
If you want a more verbose example using this you can take a look at my question here.
But keep in mind that uses the now obsolete MvcSiteMapProvider-Package, so there is a slight syntax change inside MenuHelperModel.cshtml.
We are in se same situation as question Make Twitter Bootstrap navbar link active, but in our case we are using ASP.net and MasterPages...
The thing is the navbar is defined at the masterpage and when you click a menuitem you are redirected to the corresponding child page so how would you do to change the navbar active item consecuently without replicating the logic in each child page? (Preferably without session variables and javascript only at master page)
We solved it with the following function at Master Page:
<script type="text/javascript">
$(document).ready(function () {
var url = window.location.pathname;
var substr = url.split('/');
var urlaspx = substr[substr.length-1];
$('.nav').find('.active').removeClass('active');
$('.nav li a').each(function () {
if (this.href.indexOf(urlaspx) >= 0) {
$(this).parent().addClass('active');
}
});
});
</script>
Here is what I have used in Razor:
<li class="#(Model.PageName == "DataEntryForms" ? "active" : "")">
<a href="DataEntryForms">
Data Entry Forms
</a>
</li>
<li class="#(Model.PageName == "UserAdmin" ? "active" : "")">
<a href="UserAdmin">
User Administration
</a>
</li>
Just define the name of the page as property in the model, then complete the test for each li that you have.
<script type="text/javascript">
$(document).ready(function () {
var url = window.location;
$('ul.nav li a').each(function () {
if (this.href == url) {
$("ul.nav li").each(function () {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
}
});
$(this).parent().parent().parent().addClass('active');
$(this).parent().addClass('active');
}
});
});
</script>
Assuming that the active class is set correctly by ASP.net, I would recommend an easier solution:
// Add the class to the parent li element of the active a element:
$('#NavigationMenu ul li a.active').parent().addClass('active');
// Remove the active class from the a element:
$('#NavigationMenu ul li a.active').removeClass('active');
Using ASP.net routing, this solution works smoothly in my current project.
And if you want to manipulate the active item of the menu, I would recommend to use the MenuItemDataBound of the menu control in code behind instead. But in my case, this was not necessary.
Solution by "sujit kinage" worked best for me, however I had to change one line:
var url = window.location.origin + window.location.pathname;
Currently I have a Wordpress website that uses Isotope to display all posts in a grid and there is a fixed navigation that is used for filtering the post categories.
I am trying to add some Javascript or Jquery to scroll to the top of the page when a navigation item is clicked - so it filters the category and also scrolls to the top of the page.
I have been trying different examples for a while and cannot figure it out.
I was hoping someone might be able to point me in the right direction.
Currently my navigation looks like this:
<div class="menuContainer right">
<ul id="options" class="option-set">
<li>Editorial</li>
<li> </li>
<li>Covers</li>
<li> </li>
<li>Advertising</li>
<li> </li>
<li>Film</li>
</ul>
</div>`
and the current js.
<script type="text/javascript">
jQuery(document).ready(function(){
var mycontainer = jQuery('#isocontent');
mycontainer.isotope({
itemSelector: '.postContainer',
});
// filter items when filter link is clicked
jQuery('#options a').click(function(){
var selector = jQuery(this).attr('data-filter');
mycontainer.isotope({ filter: selector });
return false;
});
// set selected menu items
var $optionSets = $('.option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
});
</script>
All help would be greatly appreciated.
Thank you!
Ok, seeing is believing :) easier to understand what you want. Basically, all you have to do is to hook up what I commented before on your Editorial, Covers, Advertising, Film links. Since you use Isotope with filtering, you have assigned click functions to your links already...
// stuff
<ul id="filters">
<li>Show all, home, whatever</li>
<li>Editorial</li>
<li>Covers</li>
<li>Advertising</li>
<li>Film</li>
</ul>
// more stuff
$('#filters a').click(function() {
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
$('body,html').animate({ // always scrolls to the top when filter link is clicked
scrollTop: 0
}, 800);
return false;
});
// even more stuff