I want to create current state for my nav links in my website.
For example when I click "Contacts" the link refers me to contacts page and I want the link "contacts" in nav to change his color.
The problem is that I'm including the header from external html file in all my webpages with php. So if I edit this external header file the changes will affect all other pages not only the contacts page.
You can set the id of the body of the page to some value that represents the current page. Then for each element in the menu you set a class specific to that menu item. And within your CSS you can set up a rule that will highlight the menu item specifically.
That probably didn't make much sense, so here's an example:
<body id="index">
<div id="menu">
<ul>
<li class="index" >Index page</li>
<li class="contact" >Page 1</li>
</ul>
</div> <!-- menu -->
</body>
In your contact.html, you would set the id of the body to: id="contact".
Finally in your CSS you have something like the following:
#index #menu .index, #contact #menu .contact{
font-weight: bold;
}
You would need to alter the ID for each page, but the CSS remains the same, which is important as the CSS is often cached and can require a forced refresh to update.
It's not dynamic, but it's one method that's simple to do, and you can just include the menu html from a template file using PHP or similar.
Related
I'm new to Wordpress and PHP and this might be a dumb question, but I'm trying to link one of my menu items to one of the sections on my index page.
I know that if I just wanted to link it to the index I should use this:
<?php echo home_url(); ?>
But I want the link to send the user to the "About" section. Basically, I need to know how to do this:
index.php#about
but with PHP.
Thank you!
You're on the right track.
The ideal way to do this would be to add a <a name="about></a> tag to the appropriate section of your template. This is called an HTML anchor and is how those #tags know where to point to.
Given that this is Wordpress, you could probably also get away with just appending that to the title of the appropriate section. So wherever you specified 'call this section "About"', you could probably redo it as 'call this section "<a name="about">About</a>"' and then you'll be able to link to it using anchors like in your example-- About
If you are new to php, maybe you should use wordpress's editor ?
In your page (in the admin page), you can put any html you want.
In the editor, you can add custom links (with anchors or not) and you can put a div tag in the "html" tab.
So if you put your link at the top of your page and put your section in a div id="myanchor", it should do it !
You shouldn't do this with HTML or PHP but rather with JS. Specifically for long pages and require in-page navigation, I really like the scrollTo jQuery plugin.
In practice, you'll have some HTML containers that look something like this:
<!-- Your menu -->
<ul>
<li id="about-button"></li>
<li id="product-button"></li>
<li id="something-button"></li>
<li id="else-button"></li>
</ul>
<!--Your page sections-->
<main class="my-page">
<section id="about"></section>
<section id="product"></section>
<section id="something"></section>
<section id="else"></section>
</main>
Once you've included jQuery and the scrollTo plugin, you'll have some JS that looks like this:
$('#about-button').click(function() {
$.scrollTo($('#about'), {
duration: 800,
offset: -50
});
return false;
});
The JS is saying that once you click on the #about-button, take 800 milliseconds and animate the page down to -50px before the position of the #about HTML element. You could just setup a series of click functions for each button and you'd have a slick in-page nav system.
I have a Wordpress site and I want to change certain CSS values in the header.php on the index page only. I have a div which is 100% width and border bottom to add an underline to the header.php
<div class="nav">
...content to create nav-bar ...
<div class="hr"></div> <!-- remove on index.php -->
</div>
I don't want it to show, or affect anything on the index.php. (I don't want to target another header.php file for this one small thing)
Wordpress has a template tag called body_class which is used to create contextual CSS hooks.
<body <?php body_class(); ?>>
You can then use it in your CSS as follows:
.blog {}
.blog.home {}
/** if blog index is a page **/
.page.blog {}
see the documentation for the rather extensive list of possible output.
Usually, by default, in a Wordpress site, the body element has a home class for the front page.
So in your CSS you could try the following:
.home .nav .hr { display:none; }
I have my navigation in a separate file that is linked to my regular pages with a <?php require statement. I have a class on the <li> in the menu that will change the word to a white rather than gray. So In short I have:
<li class="active">
Home
</li>
<li class="">
About
</li>
I need to change the class to active when the each page is being viewed but to "" when it is not being viewed. I'm not sure how to do it though?
I hope this makes sense.
Update:
As per the comments, I thought it would be a good idea to outline what I am wanting to do maybe a little better.
The Navigation itself is inside a separate file called navigation.php
The actual pages are at the base of the files ex: home, about, contact
When the page Home is being viewed the class active needs to be on the <li> of that menu item. When the about page is being viewed the class needs to be on that menu item and the menu items class for home needs to be blank.
You're looking to do stuff when window.onfocus triggers - use JQuery class manipulation here, which is the easiest way to do it.
https://developer.mozilla.org/en-US/docs/Web/API/window.onfocus
http://api.jquery.com/addClass/
http://api.jquery.com/removeClass/
EDIT: If I understand your design, you have a navbar with links over an iframe holding the sub-pages (home, about, etc). In this case, just bind click handlers to the navbar divs that set and unset class and load the proper page into the iframe.
This is actually really simple.
Add Unique Id's to each one of the <li> in the menu
and then use the jQuery window.onfocus triggers and place this script on each one of the pages (home, about, contact)
window.onfocus = document.getElementById('indexNav').className=" active";
Changing the element ID to match each page.
So on the Home page you would have something like: indexNav for the ID
and then on the About page you would have something like: aboutNav for the id.
I think this is what you were looking for, I've tested it out,
<style>
.active{
color:white !important;
}
<style>
<script>
var links = document.getElementsByTagName('a');
for (var i = links.length - 1; i >= 0; i--) {
if(links[i].href==this.location) links[i].parentNode.setAttribute('class','color');
};
</script>
This dosen't require the link titles to have the same names as locations.
Im trying to add a simple class/id on my <li> element which is in my menu, by using jquery.
However, when I click on a menu-option my class/id is added by jquery successfully but my site of course is gonna update because it redirects to the choicen site.
The result I end up with is that my class/id is removed because of this update..
How can I bypass this so my class/id stays on the selected menu <li> element.
My code looks like this:
$(document).ready(function()
{
$('li').click(function()
{
$(this).addClass('selected');
});
});
This is the site: http://insatsplutonen.xedge.nu/
Click yourself thru the menu-options. If you click on ex: Blogg the class 'selected will be added on the <li> element but will disappear because of page-load...
Thing is i want selected menu-option to turn white and others stay gray :)
Kind regards /Haris
It seems like you are loading the page based on the query string. When I select "Blogg", I get http://insatsplutonen.xedge.nu/?Blogg
When you load the page and check your query string and find a menu variable there, set a variable to the menu item value, and use it to set the class for the menu item accordingly. Ex. for Blogg item:
<li <?php echo ($queryStrVal == 'Blogg') ? 'class="selected"' : ''; ?>>
If I understand what you're asking, one way to solve this is to have a page class, for example on the body, that you use to identify which menu option is currently "selected". So something like this:
<body class="home">
<ul>
<li id="homeNav"></li>
<li id="aboutNav"></li>
<li id="contactNav"></li>
</ul>
</body>
then your css looks like this:
.home #homeNav,
.about #aboutNav,
.contact #contactNav {
// whatever styles represent "selected" here
}
This way, the "selected" nav item always appears selected on the page it represents.
To do in jQuery, find the <a> with the href of the window location and give its parent, which is li that class. This is happening once they reach the page they wanted, not when they click the link, so even pasting the URL in the browser add .selected to the correct li
var urlend= window.location.href.replace(window.location.origin + window.location.pathname, '');
$('a[href="' + urlend + '"]').parent().addClass("selected");
I've been looking around for some guide that could tell me how to make an existing menu editable when added in Concrete 5.
Here's the menu I'm using now, I'd like to be able to edit it in c5:
<div class="menu">
<ul>
<li><span>Hem</span></li>
<li><span>Om oss</span></li>
<li><span>Tjänster</span></li>
<li><span>Referenser</span></li>
<li><span> Kontakt</span></li>
</ul>
</div>
The links doesn't work at all in c5, so if anyone could help me a little that would be greatly appreciated!
Thanks!
One of the nice benefits of using any CMS is that it will automatically create the nav menu for you -- so that when users add new pages they automatically show up in the menu.
In Concrete5 specifically, the way you do this is with the "AutoNav" block. As with any block, this can be added to areas on your page, but since you generally want the nav menu to appear on EVERY page in the same place, you can also add the block directly in your template code.
So, for your menu (which is a one-level menu without a dropdown), replace your nav menu html with this code:
<?php
$nav = BlockType::getByHandle('autonav');
$nav->controller->orderBy = 'display_asc';
$nav->controller->displayPages = 'top';
$nav->controller->displaySubPages = 'none';
$nav->render('templates/header_menu');
?>
Now you will need to make a change to your CSS, because that code will generate HTML that is slightly different than what you have -- it looks more like this:
<ul class="nav-header">
<li>Hem</li>
<li>Om oss</li>
<li>Tjänster</li>
<li>Referenser</li>
<li>Kontakt</li>
</ul>
The differences are that there's no surrounding div (although you could leave that if you wanted by surrounding the php code above in the opening and closing div tags), there's no span around the nav items, and the class for a selected item is "nav-selected" instead of "current".