I have a question about styling php with css. In the code below is a navigation bar at the top of the page and it will include the page you selected. In the bottom code is how i prefer the layout, but i just can't get it to work for the php code. It is working atm but it is just text with a link color. i can't make a list like in the second code cause it is in a foreach loop.
How can i get the result i want?
Thanks in advance!!
<head>
<title>Website</title>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
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: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<?php
// This is your menu
$items = array("pagina1", "pagina2", "pagina3", "pagina4");
foreach ($items as $item)
{
if (isset($_GET['page']) && $_GET['page'] == $item)
{
echo ' ' . $item . '';
$activePage = $item . ".php";
}
else
{
echo ' ' . $item . '';
}
}
// Include your page
if (isset($activePage))
{
include $activePage;
}
else
{
include "pagina1.php";
}
?>
</body>
-
<head>
<style>
body {margin:0;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
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: #111;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div style="padding:20px;margin-top:30px;background- color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>Scroll this page to see the effect</h2>
<h2>The navigation bar will stay at the top of the page while scrolling</h2>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
You did not added ul and li tags.
echo '<ul>';
foreach ($items as $item)
{
echo '<li>';
if (isset($_GET['page']) && $_GET['page'] == $item)
{
echo ' ' . $item . '';
$activePage = $item . ".php";
}
else
{
echo ' ' . $item . '';
}
echo '</li>';
}
echo '</ul>';
You're not adding the ul structure.
<ul>
<?php
// This is your menu
$items = array("pagina1", "pagina2", "pagina3", "pagina4");
foreach ($items as $item)
{
if (isset($_GET['page']) && $_GET['page'] == $item)
{
echo '<li> ' . $item . '</li>';
$activePage = $item . ".php";
}
else
{
echo '<li> ' . $item . '</li>';
}
}
?>
</ul>
Before you begin your foreach loop, add echo "<ul>";.
Change the echo within the loop to begin with <li> and end with </li>.
Lastly, after your foreach loop, add echo "</ul>";.
Related
I am currently putting together a website, i have included a dynamic navigation bar developed purely in PHP with my basic ability.
However, using Chrome Dev Tool, i managed to obtain the style i wanted (on current page highlight the page name in white on navigation) , when including the style into my css file, the webpage would not show the style.
<?php
function outputHeader ($title){
echo '<!DOCTYPE html>';
echo '<html>';
echo '<head>';
echo '<title>' . $title . '</title>';
echo '<link rel="stylesheet" type="text/css" href="style.css">';
echo '</head>';
echo '<body>';
}
//Output Navigation
echo '<div id="banner">';
echo '<div id="nav">';
echo '<ul>';
function generateNav($pagename){
$page = array('index.php?' => 'Home', 'playerranking.php?' => 'Player Ranking', 'community.php?' => 'Community', 'register.php?' => 'Register','login.php' => 'Login',
);
foreach ($page as $link => $label){
if ($pagename == $label){
echo '<li><a class="current" href="' . $link . '">' . $label . '</li></a>';
}
else {
echo '<li>' . $label . '</li>';
}
}
echo '</ul>';
echo '</div>';
echo '</div>';
} >?
The css below
body {
background: #000;
margin: 0px;
}
#banner {
height: 109px;
width: 1295px;
background: #1d1d33;
margin-right: auto;
margin-left: auto;
}
#nav {
margin-right: 10%;
}
#nav ul {
overflow: visible;
text-decoration: none;
float: right;
}
#nav li {
display: inline;
font-family: Calibri, sans-serif;
font-size: 15px;
margin-top: 8%;
float: left;
padding-right: 30px;
list-style-type: none;
overflow: visible;
}
a#current {
color: #white;
}
#nav a {
text-decoration: none;
color: #8f8fa7;
}
From what i could see there was no two styles which were over-riding.
Help will be much appreciated
Thank you !
change
a#current {
color: #white;
}
to
#nav a.current {
color: white;
}
explanation:
# is the selector for id attributes, but you want to select the class "current". Class names are selected by .. Also, when using named colour values, don't prefix them with # - you only need the hash for hexadecimal rgb values.
In addition to all that, you have to add #nav in front of the rule so that it is more specific than the general rule #nav a. (You should also read up on CSS specificity in general)
Function to menu tree:
function category_tree($parent_id)
{
$sql = "SELECT * FROM menu WHERE parent_id ='".$parent_id."'";
$result = $conn->query($sql);
echo "<div id=\"wrapper\">
<div id=\"navmenu\">";
while($row = mysqli_fetch_object($result)):
$i = 0;
if ($i == 0) echo '<ul>';
echo '<li>' . $row->name;
category_tree($row->id);
echo '</li>';
$i++;
if ($i > 0) echo '</ul>';
endwhile;
echo "</div>
</div>";
}
The CSS file:
#navmenu {
margin: 0;
padding: 0;
}
#navmenu ul{
margin: 0;
padding: 0;
height:30px;
}
#navmenu li{
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
background:#09F;
}
#navmenu ul li a{
text-align:center;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
height:30px;
width:150px;
display:block;
color:#000066;
padding-top:7px;
}
#navmenu ul ul{
position:absolute;
visibility: hidden;
top:30px;
}
#navmenu ul li:hover ul {
visibility:visible;
}
#navmenu li:hover {
background:#3366CC;
}
#navmenu ul li:hover ul li a:hover{
background:#03C;
color:#FFFFFF;
}
Database for recursive menu:
The result is without using div element (id=wrapper,id=navmenu) is working well, see:
When i put back div elements (id=wrapper,id=navmenu), its not happen what i want:
I want: when my cursor on "Felso menu" show the dropdown menu (Sport, Ekszer, Egyeb), and if my cursor on "Foci" show the dropdown menu (Mezek, Egyeb, Utok, Labdak), etc... Any ideas how can I do that, or how to fix my code?
Ok. I sloved this problem, here is my code:
function get_menu_tree($parent_id)
{
global $conn;
$menu = "";
$sqlquery = " SELECT * FROM menu where parent_id='" .$parent_id . "' ";
$res=mysqli_query($conn,$sqlquery);
while($row=mysqli_fetch_array($res,MYSQLI_ASSOC))
{
$menu .="<li><a href='".$row['link']."'>".$row['name']."</a>";
$menu .= "<ul>".get_menu_tree($row['id'])."</ul>"; //call recursively
$menu .= "</li>";
}
return $menu;
}
Okay so I have found after some long research a code that I will include here that adds prev/next url at bottom of page. What I am doing is making a portfolio that in the future I will add pages and remove, so I needed a php code that would run pages using the footer.php and go to next in line. Example it would show page1.php, page2.php, page3.php, page4.php and so on. That all works great in the code I have. What I would like now is to put a variable name on each page of what that portfolio piece will be then have it echo next to the previous and next button. I can get it to work, but it shows the existing name on each prev/next button.
If I am not making sense just tell me and I will explain it differently. I hope someone can help, been trying to get my portfolio done for some time now! :)
Here is my header.php
<html>
<head>
<title>PAGINATION TEST</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<nav>
<div id="nav_menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
<body>
Here is my page1.php
<?php //THIS IS THE PREVIOUS/NEXT LINK TITLE FOR EACH PORTFOLIO PAGE
session_start();
$_SESSION['link-title'] = "wonder woman";
?>
<?php include('header.php') ?>
<div id="main_body">
PAGE 1
</div>
<?php include('footer.php') ?>
Here is my footer.php
<?php
session_start(); //this NEEDS to be at top of the page before any output etc
?>
<?php
$pinfo = pathinfo($_SERVER["SCRIPT_FILENAME"]);
$reqpath = dirname($_SERVER["REQUEST_URI"]);
$linkname = ($_SESSION['link-title']);
if(preg_match("/(.*?)(\d+)\.php/", $pinfo["basename"], $matches)) {
$fnbase = $matches[1];
$fndir = $pinfo["dirname"];
$linkTitle = $linkname;
$current = intval($matches[2]);
$next = $current + 1;
$prior = $current - 1;
$next_file = $fndir . DIRECTORY_SEPARATOR . $fnbase . $next . ".php";
$prior_file = $fndir . DIRECTORY_SEPARATOR . $fnbase . $prior . ".php";
$next_link = $linkTitle . $next;
$prev_link = $linkTitle . $prior;
if(!file_exists($next_file)) $next_file = false;
if(!file_exists($prior_file)) $prior_file = false;
if($prior_file) {
$link = $reqpath . DIRECTORY_SEPARATOR . basename($prior_file);
// echo "Prior";
}
if($prior_file && $next_file) {
// echo " / ";
}
if($next_file) {
$link = $reqpath . DIRECTORY_SEPARATOR . basename($next_file);
// echo "Next";
}
if($prev_link) {
$prevTitle = $prev_link;
}
if($next_link) {
$Title = $next_link;
}
}
?>
<div id="pagination_container">
<div id="previous_link">
<!-- PREVIOUS -->
<?php if($prior_file) {
$link = $reqpath . DIRECTORY_SEPARATOR . basename($prior_file);
echo "PREVIOUS";
// echo $_SESSION['link-title'];
echo $prevTitle;
}
?>
</div>
<div id="next_link">
<!-- NEXT -->
<?php if($next_file) {
$link = $reqpath . DIRECTORY_SEPARATOR . basename($next_file);
echo $Title;
// echo $_SESSION['link-title'];
echo "NEXT";
}
?>
</div>
</div>
<div id="footer">
copyright blah blah
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</body>
</html>
here is my css
body,html {
padding: 0;
margin: 0;
overflow-x: hidden;
}
#nav_menu {
background-color: pink;
width: 100%;
height: 80px;
}
#nav_menu ul {
text-align: right;
}
#nav_menu li {
list-style-type: none;
display: inline-block;
padding-right: 20px;
padding-top: 30px;
}
#main_body {
width: 100%;
background-color: #dbdbdb;
height: 400px;
padding: 20px;
color: #333333;
}
#pagination_container {
width: 100%;
background-color: pink;
display: flex;
}
#previous_link {
width: 50%;
background-color: purple;
color: white;
display: flex;
float: left;
text-align: left;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 20px;
}
#previous_link:hover {
color: white;
transition: 0.5s all;
}
#previous_link:link {
color: white;
text-decoration: none;
}
#next_link {
width: 50%;
background-color: purple;
color: white;
text-align: right;
padding-top: 50px;
padding-bottom: 50px;
padding-right: 20px;
border-left: 1px solid #dbdbdb;
}
#next_link a:visited {
color: white;
}
#next_link a:link {
color: white;
text-decoration: none;
}
#next_link a:hover {
color: blue;
transition: 0.5s all;
}
#next_link:hover {
background-color: pink;
transition: 0.5s all;
}
#footer {
text-align: center;
padding-top: 20px;
}
Here is page2.php for example of how it works now
<?php //THIS IS THE PREVIOUS/NEXT LINK TITLE FOR EACH PORTFOLIO PAGE
session_start();
$_SESSION['link-title'] = "superman";
?>
<?php include('header.php') ?>
<div id="main_body">
PAGE 2
</div>
<?php include('footer.php') ?>
I'm developing an application that contains a table made by div. The divs are filled according to the results database.
As you can see in the image below.
However, if I put one more item on the bench, just disrupting the entire table. What I would do is to put a rod horizontally so that it could rotate it and so see the other items in the database without messing up the structure.
CODE
CSS
#fundo {
display: block;
height: 550px;
margin-left: -3%;
overflow: scroll;
overflow-y: hidden;
width: 1150px;
}
.vacina, .dose, .aplicacao {
background-color: #D3D3D3;
border-radius: 5px;
float: left;
height: 90px;
margin-top: 6px;
margin-left: 6px;
position: relative;
width: 100px;
}
.vacina {
height: 50px;
}
PHP
include_once ("db.php");
$sql = "SELECT nomeVacina FROM vacina ORDER BY cod";
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$x = 0;
///////////////////////////////////////////////
////////////////// DIV VACINA /////////////////
while($linha=mysql_fetch_assoc($ds1)) {
$x++;
if(!($linha['nomeVacina'] == "Outras")) {
echo "<div class='vacina' id='".$x."'>";
echo "<br>".$linha['nomeVacina'];
echo "</div>";
}
}
}
///////////////////////////////////////////////
////////////////// FIM DIV VACINA /////////////
///////////////////////////////////////////////
////////////////// DIV DOSE ///////////////////
for($i = 1; $i < 6; $i++) {
echo "<br><br><br><br><br><br>";
echo "<div class='dose'>";
if($i == 4 || $i == 5) {
echo "<br>Reforco";
}
else {
echo "<br>Dose ".$i;
}
echo "</div>";
///////////////////////////////////////////////
////////////////// FIM DIV DOSE ///////////////
///////////////////////////////////////////////
////////////////// DIV APLICACAO //////////////
$z=0;
for($j = 1; $j <= $x; $j++) {
$sql2 = "SELECT DATE_FORMAT(dataAplicacao, '%d/%m/%Y') AS dataAplicacao, loteVacina, descricaoVacina FROM vacinaaplicada WHERE dose = ".$i." AND codigoVacina = ".$j." AND codPaciente = '".$cns."'";
$ds2=mysql_query($sql2);
$linha2=mysql_fetch_assoc($ds2);
$z++;
echo "<div class='aplicacao' id='".$z.$i."'>";
if($linha2 == "") {
echo "";
}
else {
echo "<div style='margin-top:10px;'>". $linha2['descricaoVacina']."<div class='fonte'><b>Data</b><br></div>". $linha2['dataAplicacao'] . "<div class='fonte'><b>Lote</b><br></div>".$linha2['loteVacina']."</div>" ;
}
echo "</div>";
}
///////////////////////////////////////////////
////////////////// FIM DIV APLICACAO /////////////
}
As you can see in the previous image, has 9 div class Vacina.
If I add a div class Vacina the most, will mess up the table.
What I'd like is to insert more than 9 div class Vacina causing the background div (div class includes all div) increase in width, but leaving it the same way the image, just putting a scroll bar horizontally to display whole div.
If I understood you correctly, I'd try this:
To #fundo, add
white-space: nowrap;
And I replaced float: left; with:
display: inline-block;
Maybe that's what you're looking for.
EDIT:
Okay, I've built an example from scratch (but using javascript, not php, I can't test php atm): JSFiddle.
It's a bit messy but you should be able to code it in PHP if you like to.
Let me know if you've got trouble with this.
EDIT 2:
Just to have it in the answer (not just in its comments), the final solution is: this JSFiddle.
HTML + PHP
<?php
include_once("sessao.php");
if (!isset($_SESSION['funcionario']['cpfFuncionario'])) {
header("Location:index.html");
}
else if($_SESSION['funcionario']['adicionarDireito'] == 0) {
header("Location:funcionario.php");
}
?>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<title>Vacina Digital - Cadastrar Vacinação</title>
<script type="text/javascript" src="template/js/script.js"></script>
<link rel="stylesheet" href="template/css/reset.css">
<link rel="stylesheet" href="template/css/fonts.css">
<style>
body {
background-color: #fdfdfd;
overflow-y: auto;
}
#form {
margin-left: 50px;
padding-left: 7%;
padding-top: 50px;
padding-bottom: 10px;
margin-right: 50px;
border: 1px solid #0F935A;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-moz-box-shadow: 2px 2px 2px #cccccc;
-webkit-box-shadow: 2px 2px 2px #cccccc;
box-shadow: 2px 2px 2px #cccccc;
}
#form h1 {
text-align: center;
margin-right: 150px;
font-family: "RobotoCondensed";
font-size: 30px;
}
</style>
</head>
<body>
<?php
include_once 'menufuncionario.php';
?>
<div id="form">
<fieldset>
<?php
include_once("db.php");
if(isset($_POST['cns'])) {
$cns = $_POST['cns'];
$_SESSION['paciente'] = $cns;
}
else{
$cns = $_SESSION['paciente'];
}
$sql = "SELECT *, DATE_FORMAT(dataNascimento, '%d/%m/%Y') AS 'data' FROM populacao WHERE codigoCns = ".$cns;
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$sql2 = "SELECT * FROM vacinaaplicada WHERE codPaciente = ".$cns;
$ds2 = mysql_query($sql2);
$linha=mysql_fetch_assoc($ds2);
$linha2=mysql_fetch_assoc($ds1);
$data_nasc = $linha2['data'];
$data_nasc=explode("/",$data_nasc);
$data=date("d/m/Y");
$data=explode("/",$data);
$anos=$data[2]-$data_nasc[2];
if ($data_nasc[1] > $data[1]) {
$anos = $anos-1;
} if ($data_nasc[1] == $data[1]) {
if ($data_nasc[0] <= $data[0]) {
$anos = $anos;
} else {
$anos = $anos-1;
}
} if ($data_nasc[1] < $data[1]) {
$anos = $anos;
}
$data2=date("d/m/Y");
echo "<h1>Carteira de Vacinação - ".$linha2['nomeCrianca']."</h1>";
/*echo "
<div id='caderneta' style='margin-left:-6%'>
";*/
include_once 'caderneta.php';
echo "
</div>";
} else {
echo "<h1>CNS Inválido</h1><br><br>
<center><a href='javascript:window.history.go(-1)'><button style='margin-left:-150px' class='button button-red' href='javascript:window.history.go(-1)'>Voltar</button></a></center>
";
}
}
?>
</div>
</body>
</html>
Caderneta
<html>
<head>
<link rel="stylesheet" href="template/css/fonts.css">
<style type="text/css">
#fundo {
min-width: 800px;
display: block;
overflow: scroll;
overflow-y: hidden;
margin-left: -3%;
height: 550px;
white-space: nowrap;
}
#pinguim, .vacina, .dose, .aplicacao {
width: 100px;
height: 90px;
background-color: #D3D3D3;
margin-top: 6px;
margin-left: 6px;
border-radius: 5px;
position: relative;
float: left;
}
#pinguim, .vacina {
height: 50px;
}
.vacina, .dose{
background: green;
font-family: RobotoCondensed;
font-size: 14pt;
text-align: center;
color: #ffffff;
}
.vacina{
padding-top: -14px;
line-height: 15px;
}
.dose, .aplicacao{
margin-top: -32px;
}
.dose{
line-height: 29px;
}
.aplicacao, .fonte {
font-family: "RobotoLight";
text-align: center;
}
</style>
</head>
<body>
<div id = "fundo">
<div id = "pinguim">
</div>
<?php
include_once ("db.php");
$sql = "SELECT nomeVacina FROM vacina ORDER BY cod";
$ds1=mysql_query($sql);
if ($ds1) {
if (mysql_num_rows($ds1) > 0) {
$x = 0;
$k = 0;
while($linha=mysql_fetch_assoc($ds1)) {
$x++;
if(!($linha['nomeVacina'] == "Outras")) {
echo "<div class='vacina' id='".$x."'>";
echo "<br>".$linha['nomeVacina'];
echo "</div>";
}
}
for($i = 1; $i < 6; $i++) {
echo "<br><br><br><br><br><br>";
echo "<div class='dose'>";
if($i == 4 || $i == 5) {
echo "<br>Reforco";
}
else {
echo "<br>Dose ".$i;
}
echo "</div>";
$z=0;
for($j = 1; $j <= $x; $j++) {
$sql2 = "SELECT DATE_FORMAT(dataAplicacao, '%d/%m/%Y') AS dataAplicacao, loteVacina, descricaoVacina FROM vacinaaplicada WHERE dose = ".$i." AND codigoVacina = ".$j." AND codPaciente = '".$cns."'";
$ds2=mysql_query($sql2);
$linha2=mysql_fetch_assoc($ds2);
$z++;
echo "<div class='aplicacao' id='".$z.$i."'>";
if($linha2 == "") {
echo "";
}
else {
echo "<div style='margin-top:10px;'>". $linha2['descricaoVacina']."<div class='fonte'><b>Data</b><br></div>". $linha2['dataAplicacao'] . "<div class='fonte'><b>Lote</b><br></div>".$linha2['loteVacina']."</div>" ;
}
echo "</div>";
}
}
echo"</div>";
}
}
?>
</div>
</div>
</body>
</html>
I am drafting a new website, and having some issues with highlighting the parent page when on a child page. I will explain what system I am using, and then what I have tried.
For a single top level item, I use:
PHP:
<?php $currentPage = basename($_SERVER['SCRIPT_NAME']); ?>
at the top of the page, followed by:
<ul>
<?php echo "\n"; if ($currentPage == '#') { ?><li class="on">News</li><?php } else { ?><li class="off">News</li><?php } ?>
</ul>
And for drop downs:
<li>About
<ul>
<?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">Club</li><?php } else { ?><li class="off">Club</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'coaches.php') { ?><li class="on">Coaches</li><?php } else { ?><li class="off">Coaches</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'officials.php') { ?><li class="on">Officials</li><?php } else { ?><li class="off">Officials</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'management.php') { ?><li class="on">Management Team</li><?php } else { ?><li class="off">Management</li><?php } ?>
</ul>
</li>
</ul>
Styled with:
CSS:
.nav {
width: 990px;
height: 60px;
}
.nav ul {
margin-left: 0px;
padding-left: 0px;
width: auto;
}
.nav ul li {
float: left;
list-style-type: none;
position: relative;
}
.nav ul li a {
color: #666;
font-size: 14px;
text-decoration: none;
background-color: #fff;
display: block;
height: 36px;
width: 110px;
text-align: center;
line-height: 36px;
padding-bottom: 0px;
}
a.none {
cursor: default;
}
.nav li:hover > a {
background-color: #181d63;
text-decoration: none;
color: #fff;
}
.nav ul ul {
position: absolute;
visibility: hidden;
display: block;
}
.nav li ul li a {
background-color: #e5e5e5;
color: #000;
top: 38px;
text-align: center;
font-size: 12px;
}
.nav li ul li a:hover {
background-color: #CCC;
color: #000;
top: 38px;
text-align: center;
}
.nav li:hover ul {
visibility: visible;
background-color: #181d63;
}
.on {
color: #fff;
font-size: 14px;
text-decoration: none;
background-color: #181d63;
display: block;
height: 36px;
width: 110px;
text-align: center;
line-height: 36px;
cursor: default;
}
.off {
}
This works well and highlights the page that is open, be that in the top level or drop down. I would like to make it so that being on any of the child pages will also highlight the top level parent.
I have tried:
PHP:
<ul>
<li><?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">About</li><?php } else { ?><li class="off">About<?php } ?>
<ul>
<?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">Club</li><?php } else { ?><li class="off">Club</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'coaches.php') { ?><li class="on">Coaches</li><?php } else { ?><li class="off">Coaches</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'officials.php') { ?><li class="on">Officials</li><?php } else { ?><li class="off">Officials</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'management.php') { ?><li class="on">Management Team</li><?php } else { ?><li class="off">Management</li><?php } ?>
</ul>
</li>
</ul>
And adding the following to the css:
CSS:
a.drop {
}
a.drop:hover {
visibility: visible !important;
background-color: #181d63;
}
At this point, I run in to two things.
Being on the 'club.php' page now highlights the parent.
I'm not sure how to add to the php to incorporate all it's child pages. ('page1', 'page2') doesn't seem to work.
Although the parent is now highlighted, that menu item no longer drops down.
I think I need to create an .onchild condition that when applied to a top level parent, still allows a drop down, but I'm really quite stuck on how to go about this, and seem to be deviating ever further from my original code! I am keen to keep this all in PHP and CSS without resorting to jquery if possible.
Why not add child in parent 'if'?
<ul>
<li><?php echo "\n"; if ($currentPage == 'club.php' || $currentPage == 'coaches.php' || $currentPage == 'officials.php' || $currentPage == 'management.php') { ?><li class="on">About</li><?php } else { ?><li class="off">About<?php } ?>
<ul>
<?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">Club</li><?php } else { ?><li class="off">Club</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'coaches.php') { ?><li class="on">Coaches</li><?php } else { ?><li class="off">Coaches</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'officials.php') { ?><li class="on">Officials</li><?php } else { ?><li class="off">Officials</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'management.php') { ?><li class="on">Management Team</li><?php } else { ?><li class="off">Management</li><?php } ?>
</ul>
</li>
</ul>
Edit: Or you could use in_array
$array = array('club.php', 'coaches.php', 'etc');
if(in_array($currentPage, $array)) { /* do code */ }