I created a page with an header. This header.php has the following format:
<?php
$index_admin = "/test/index_test.php";
...
?>
<div id="button">
<ul>
<li>test</span></li>
...
</ul>
</div>
where
$currentpath = basename(__FILE__)
setted in every page before
include "header.php"
So when I open the page index_test I have the class buttonon, which changes the color of my link (so it's displaied as active).
Now I'd like to create an hidden submenu of the li which looks like:
<li>test</span></li>
<ul style="display:none">
<li>...</li>
which is displaied only if I go only over the
<li>
with
<onmouseover:"callfunctiontoshowthesubmenu">.
There I am.
My problem is: when I open a page listed on the submenu, I want to keep the submenu displayed. How can I do that?
Which is the fastest way?
Related
I'm working with a WordPress site, using the ACF plugin and I have navigation that is in two rows. The first row <li> NEEDS to be class="active" to second row even show up. I can get either the first row to show up as active, or second but not both.
To make things more fun, there is no reliable way to figure this using child-pages (it was tried). Some of nav objects are parent pages and I have no power over that.
And since the goal is to get this working with templates, hardcoding page names isn't an option either..
I somehow have to to "go back" in code if inner <li> is marked as active.
ACF fields:
ACF has upper nav with name, link and sub-navigation repeater.
and sub-navigation repeater has name and link for every sub-page.
In code there is <li> tags inside <li> tags iterated using ACF repeater and while have rows. $lang_code is used to figure from where to pull header texts.
<?php
$lang = get_locale();
$curr_page = get_permalink(); ?>
<nav role="navigation">
<ul class="navigation">
<?php if (have_rows('navigation', $lang_code)) :
while(have_rows('navigation', $lang_code)) : the_row() ?>
<li class="<?php if($curr_page == get_sub_field('link') ){ echo 'active'; } ?>">
<?php the_sub_field('name') ?>
<ul class="sub-navigation">
<?php if (have_rows('sub-navigation', $lang_code)) :
while(have_rows('sub-navigation', $lang_code)) : the_row() ?>
<li class="<?php if($curr_page == get_sub_field('link')){ echo 'active'; } ?>"><?php the_sub_field('name') ?></li>
<?php endwhile; //end sub while
endif; //end sub if ?>
</ul>
</li>
<?php
endwhile; // End navigation while
endif; // End navigation if
</ul>
</nav>
https://imgur.com/a/Ws8YA
Pictures, first one: FAQ is class="active", but since Support is not, nothing is shown. The second picture is while support is class="active", showing second row of links (with support active since they happen to be same page).
I've tried all kinds of parent iterating and counters in nav columns, but I still have no working answer.
I am considering going jQuery + PHP or something like that.
Try using jQuery:
$('.sub-navigation li.active').parents('li').addClass('active');
Code above add .active class to parent <li> of child that has .active class.
I have a menu at the top of the page. On the bottom below the article I want to show the submenu items that are children or siblings of the active menu item (the item that I clicked on to get to the page in question).
That is, if I clicked on "Submenu item A" I want to see "Submenu item A" and "Submenu item B" in the bottom menu.
I want to do this using php or css, but not using javascript.
I don't want this to happen "on the fly" when hovering or something. I just want to show the childs and siblings of current item when that item has been clicked and I'm already on the target page to aid the user in navigating through the whole category.
Snippet showing what I want it to look like when "Menu item 1" or any of its submenu items are opened.
<ul>
<li>
Menu item 1
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
</ul>
<li>
<a href='item-2'>
Menu item 2
</a>
<li>
</ul>
<article>Page contents</article>
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
<ul>
Wrap the bottom ul with this code in php.
This script check if the path contains item-1, if so, he shows the ul otherwise it didn't.
<?php
$url = $_SERVER['REQUEST_URI'];
$url_parts = parse_url($url);
if (strpos($url_parts["path"], 'item1') !== false) {
?>
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
<ul>
<?php } ?>
This can't be done with CSS alone. For it to work with PHP and no Javascript it will only change on page load.
I'm trying to figure out how to add a css class to a <li> tag in my menu navigation. I'm using a template that gets included on every page of site. In the template is the menu navigation code. I need to set the css class on the <li> for the corresponding active page using PHP_SELF I presume?
Navigation looks like this
And this is what it should look like when the page is displayed that corresponds to the page that was clicked in the navigation menu.
Here is the navigation menu code
<!-- MENU BEGIN -->
<div id="menu">
<ul id="nav">
<li>Home</li>
<li <?php echo $class_current; ?>>Technician</li>
<li <?php echo $class_current; ?>>Programming</li>
</ul>
</div>
<!-- MENU END -->
Here is the PHP function I am trying to create
function classCurrent(){
if(dirname($_SERVER['PHP_SELF']) == true) {
echo ' class="current"';
}
else {
echo '';
}
$current = classCurrent();
return $current;
}
I know this is possible, I just can't figure it all out yet.
You may try specifying some base class that has variables for the corresponding menus. So like if you are requesting the technician page:
Class Activmenu {
public $technician = true;}
alternatively you may use superglobal variables but this is safer. And in the menu you can check for the true item
if(Activemenu->technician)? echo'class="activeclass"' : 0;
Checking urls you will run into problems, if later on you have to modify your url structure.
So it is really simple actually to do this. All that needs to be done is have a variable set on the active page above the <html> tag preferably.
Example:
<?php $currentPage = 'technician';
<html>
So now we have this variable set on the technician page above the html tag. Now to call it in the template page on the navigation menu <li> all that needs to be done is the following.
<?php if ($currentPage=="technician") echo " class=\"current\""; ?>
Now just need to repeat this step for each page of the website.
This was also answered here PHP navigation menu
and a real good tutorial on how to do it is here http://alistapart.com/article/keepingcurrent
As a result the navigation code will end up looking something like this
<!-- MENU BEGIN -->
<div id="menu">
<ul id="nav">
<li<?php if ($currentPage=="home") echo " class=\"current\""; ?>>Home</li>
<li<?php if ($currentPage=="technician") echo " class=\"current\""; ?>>Technician</li>
<li<?php if ($currentPage=="programming") echo " class=\"current\""; ?>>Programming</li>
</ul>
</div>
<!-- MENU END -->
In my html page, I use a PHP include to insert my site-wide header:
<?php include 'header.php'; ?>
Here is the code in header.php:
<div id="header">
<div id="navigation">
<ul>
<li>home</li>
<li>about us</li>
<li>competition</li>
<li>media</li>
<li>sponsors</li>
<li>contact us</li>
</ul>
</div>
</div>
Here is the CSS in the header of the HTML document:
#nav_about { color:#4c005c; }
The "active" class in the inserted code is to change the color of that link to signify what page you are on. That functions fine, as "active" is defined in the CSS document linked to the html file. I want to modify the color of a particular link depending on what page it is included in. Thing is, the CSS on that page (the one defining #nav_about) does not apply when I test it out. The include works fine though.
In summary, I need to find a way to modify a site-wide snippet of HTML that is inserted via a PHP include with CSS on that page it is inserted in.
I am new to HTML and PHP, so I assume it is some lack of knowledge here.
A simple way to do change the class of the HTML element based on the current page you are on in PHP might look something like this:
<?php
$nav_links = array(
'/index.php' => array('id' => 'nav_home', 'label' => 'Home'),
'/about_us.php' => array('id' => 'nav_about', 'label' => 'About Us'),
// and so on for each link
);
?>
<div id="header">
<div id="navigation">
<ul>
<?php
foreach ($nav_links as $href => $link_info) {
if ($_SERVER['REQUEST_URI'] === $href) {
?>
<li><?php echo $link_info['label']; ?></li>
<?php
} else {
?>
<li><?php echo $link_info['label']; ?></li>
<?php
}
}
?>
</ul>
</div>
</div>
Here you would just apply class=active for the link that corresponds to the currently viewed page. This also makes it really easy to separate out you page/link configuration if you so desire.
Sounds like a selector specificity issue. What's the CSS for your navigation links?
If it's something like #navigation li {color: #abc}, that will take priority over the #nav_about selector.
Selector specificity is ranked by the number of ids, classes, and elements in each.
1 id + 1 element > 1 id.
Increase the specificity of the #nav_about selector (e.g. change it to #navigation #nav_about) and you should be fine.
Try using the traditional way, inside the PHP tags,
<?php
echo "<link rel='stylesheet' href='css-filename.css' type='text/css'>";
?>
I have stuck in a code. I am building a website which has lots of inner page. i include "sidebar.php" and place my side navigation in this file.
<div class="side-nav">
<ul>
<li>Calls
<ul>
<li>Call Record</li>
<li>Call Logs</li>
<li>Live Call Intercept</li>
<li>Voicemail</li>
</ul>
</li>
<li>SMS
<ul>
<li>SMS Feature</li>
<li>Redirect SMS</li>
</ul>
</li>
</ul>
</div>
Now i want to high light "record-calls" li when "record-calls.php" page is open and other list don't show any backgrounds.
There is only 1 sidebar.php which is including in every page.
You can simply use if condition
if(stristr($_SERVER['PHP_SELF'],'record-calls.php'))
{
//highlight it
}
Thanks
There are some methods you can use to highlight current page on the sidebar menu. I don't know your structure. In this case, I would suggest get the current URL by php and check if, for example, record-calls is included in it or not. Something like that:
<li <?php if(strpos('record-calls', $current_url) !== false) echo "class='current'"; ?>>Call Record</li>
Set some unique class on your <body> for a given page and use it to style the relevant part of your menu.
Exemples (not pretty, but I use your actual HTML) :
.record-calls side-nav li li:first-child { /* highlight styles */ }
.call-logs side-nax li li:first-child + li { /* highlight styles */ }
etc...