CSS 'active' does not work when converting HTML to PHP include - php

I realize a 'similar' question was asked but the other user is using a much different approach than I am. I am simply trying to include an HTML navigation on my PHP pages for easier modification down the road. When you hover over a button, it is highlighted while the 'active' page is always highlighted. The hover works on both the html and php pages.
When my index page is coded as index.html, the 'active' state works. When i run it as index.php, it does not.
Header.html
<div class="header_resize">
<div class="header">
<div class="logo"><img src="images/logo.gif" width="234" height="118" border="0" alt="logo" /></div>
<div class="menu">
<ul>
<li><span>Home Page </span></li>
<li><span>Services</span></li>
<li><span>Portfolio</span></li>
<li><span> About Us </span></li>
<li><span> Contact Us</span></li>
</ul>
</div>
<div class="clr"></div>
</div>
</div>
CSS:
/*menu*/
.menu { padding:38px 0 0 0; margin:0; width:480px; float:right; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:right; }
.menu ul li { float:left; margin:0; padding:0 5px; border:0; }
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none; }
.menu ul li a span { padding:12px 9px; background:none; }
.menu ul li a:hover { background: url(../images/r_menu.gif) no-repeat right; }
.menu ul li a:hover span { background:url(../images/l_menu.gif) no-repeat left; }
.menu ul li a.active { background:url(../images/r_menu.gif) no-repeat right; }
.menu ul li a.active span { background:url(../images/l_menu.gif) no-repeat left; }
As I mention above, if the link above in header.html are coded as (page.html), the "active hover" works. What gives?
RESOLUTION
For those interested, thanks to Kirkby's help, I recreated the Header.html file, saved it as PHP and utilized Request_URI functionality. The changes look like:
<div class="header_resize">
<div class="header">
<div class="logo"><img src="images/logo.gif" width="234" height="118" border="0" alt="logo" /></div>
<div class="menu">
<ul>
<li><a href="index" <?php if($_SERVER["REQUEST_URI"] == "/index") { echo 'class="active"';} ?>><span>Home Page </span></a></li>
<li><a href="about" <?php if($_SERVER["REQUEST_URI"] == "/about") { echo 'class="active"';} ?>><span> About Us </span></a></li>
<li><a href="portfolio" <?php if($_SERVER["REQUEST_URI"] == "/portfolio") { echo 'class="active"';} ?>><span>Services</span></a></li>
<li><a href="enroll" <?php if($_SERVER["REQUEST_URI"] == "/enroll") { echo 'class="active"';} ?>><span>Enroll</span></a></li>
<li><a href="contact" <?php if($_SERVER["REQUEST_URI"] == "/contact") { echo 'class="active"';} ?>><span> Contact Us</span></a></li>
</ul>
</div>
<div class="clr"></div>
</div>
</div>

How do you add the class="active" to the correct button when you're including an HTML file in a PHP page? From your example, it looks like the HTML header file you're including has the Contact Us button active, and it would be that way for all pages.
You'll either need to have some PHP code in your header to add the class="active" to the correct button, or use javascript in the browser to add the class to the correct button for each page. When I write a header in an include file, I usually create a function with a parameter for selecting the current tab in the navigation section. Then I call that function from the appropriate place in the main page.

Here is my solution; it's very easy:
<ul id="menu">
<?php
$c=$_GET[c];
?>
<li><a href="index.php?c=inicio.html" <?php if($c=="inicio.html"){ echo 'class="active"';}?>>Inicio</a></li>
<li><a href="index.php?c=corporativo.html" <?php if($c=="corporativo.html"){ echo 'class="active"';}?>>Corporativo</a> </li>
<li><a href="index.php?c=diseno.html" <?php if($c=="diseno.html"){ echo 'class="active"';}?>>Diseño</a></li>
<li><a href="index.php?c=impresion.html" <?php if($c=="impresion.html"){ echo 'class="active"';}?>>Impresión</a> </li>
</ul>
I only read the variable that I used in the include.

Related

Make navigation bar active in php include_once tag

I have the basic navigation bar for all my pages in header.php so how do it make it active so people know which page they are on via the navigation bar
HTML
<ul class="menu">
<li>HOME</li>
<li>SMARTRETAIL FEATURES</li>
<li>FREQUENTLY ASKED QUESTIONS</li>
<li>CUSTOMERS</li>
<li>CONTACT US</li>
<li>USER GUIDE</li>
</ul>
CSS
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.menu li {
float: left;
border-right: 1px solid black;
}
ul.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.menu li a:hover:not(.active) {
background-color: #000000;
}
.active {
background-color: #2676f5;
}
if php refer to the answer here How to set current page "active" in php
in short
// set this above the include of the nav
$activePage = "offnungszeiten.php";
$pages = array();
$pages["index.php"] = "Öffnungszeiten";
$pages["features.php"] = "Sauna";
$pages["faq.php"] = "Frauensauna";
$pages["custom.php"] = "Beauty Lounge";
$pages["feiertage.php"] = "Feiertage";
//menu.php
<?php foreach($pages as $url=>$title):?>
<li>
<a <?php if($url === $activePage):?>class="active"<?php endif;?> href="<?php echo $url;?>">
<?php echo $title;?>
</a>
</li>
<?php endforeach;?>
Try this:
<ul class="menu">
<li>HOME</li>
<li>SMARTRETAIL FEATURES</li>
<li>FREQUENTLY ASKED QUESTIONS</li>
<li>CUSTOMERS</li>
<li>CONTACT US</li>
<li>USER GUIDE</li>

Header disappear during print

The header is being displayed dynamically using php like <?php include 'header.php';
?> and it disappears during print. And also the social media icons change to URLs instead of images.
Couldn't find a possible solution. Please suggest some solutions.
The HTML and CSS for header:
<nav class="navbar navbar-inverse" role="navigation">
<div>
<ul class="nav navbar-nav" >
<li>Add</li>
<li>Edit</li>
<li>Search</li>
<li>List</li>
<li>Pdf</li>
</ul>
</div>
</nav>
<style>
.navbar{
font-family:"Myriad Pro";
background-color:#333;
color:white;
font-size:16px;
text-align: center ;
width:100% !important;
z-index: 10;
}
.navbar-nav{
width: auto !important;
}
.navbar-inverse .navbar-nav>li>a{
color:white;
}
.navbar-inverse .navbar-nav>li:hover{
background-color:#000;
color:black;
}
.nav > li {
display:inline-block !important
}
</style>
There is a high chance your CSS has print styles are too global; especially form your anchors. The CSS you posted does not contain the print CSS. Are you including any 3rd party CSS files? Look for #media print a's. You will see that they probably include the (href)

Inserting design elements in my WordPress nav menu

Hi to everyone and many thanks to all who put out the effort to help me.
Here is my problem, and please bear with me as I'm relatively new to all of this.
I'm trying create a custom WordPress theme for the blog on my site, so that the look and feel of my blog and my site are seamless.
Right now my problem is the nav menu. I have vertical lines separating the nav links and I have been unable to find any examples that show how to do this, or something like it in WordPress and if it's possible can it be done without jQuery.
Here is my site for the visual; http://is-images.com/
If it helps, here is the html code for the menu and the css
<div id="HeaderNav">
<ul>
<li class="link">about</li>
<li class="navsep"> </li>
<li class="link">web</li>
<li class="navsep"> </li>
<li class="link">photo</li>
<li class="navsep"> </li>
<li class="link">blog</li>
<li class="navsep"> </li>
<li class="link">contact</li>
</ul>
</div>
CSS
#HeaderNav
{
display:block;
width:300px;
height:24px;
float:right;
margin-top:70px;
margin-right:37px;
}
#HeaderNav ul
{
position:relative;
display:block;
float:right;
}
#HeaderNav ul li
{
padding:0 4px;
display:block;
height:100%;
float:left;
margin:0 auto;
text-align:center;
}
#HeaderNav ul li.navsep
{
width:1px;
height:24px;
margin:0 7px;
padding:0;
background-color:#ffffff;
}
If anyone can help, in any way, I would greatly appreciate it.
Again, many thanks to all who put out the effort.
If you want to add vertical lines to separate your nav menu options on your wordpress theme you can do it with a few CSS rules. jQuery is not needed.
Here you go:
li.menu-item a {
border-right: 1px solid #fff;
padding-right: 5px;
padding-left: 5px;
}
they have just create an empty element after each menu:
<li class="navsep"> </li>
Then design it with css
#HeaderNav ul li.navsep
{
width:1px;
height:24px;
margin:0 7px;
padding:0;
background-color:#ffffff;
}

PHP Include not working - php too complex? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I'm just branching my way out into php as I want to have a central menu file that I can edit instead of having to change the code on 20+ pages each time I update it! However my php include does not seem to be working. I'm wondering if maybe my php file I'm trying to include is too complex or doesn't work how I'm thinking (my understanding is that the php include basically takes all the text within it (in this case the html) and replaces the php include line with it)? There is also some css that would format the html when it was actually in the webpage, and I'm wondering if that is what is breaking it? Code is below.
html:
<div id="buttonstrip">
<?php include 'menubar.php';?>
</div>
php:
<?php
echo '<nav>
<ul>
<li>Computing
<ul>
<li>For Individuals
<ul>
<li>Repair</li>
<li>Maintenance</li>
<li>New Builds</li>
<li>Tuition</li>
</ul>
</li>
<li>For Business
<ul>
<li>Appraisals</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Upgrades</li>
</ul>
</li>
</ul>
</li>
<li>Branding
<ul>
<li>Logos & Branding</li>
<li>Stationary</li>
<li>Guidelines</li>
</ul>
</li>
<li>Web Design
<ul>
<li>For Individuals</li>
<li>For Business</li>
</ul>
</li>
<li>Graphic Design
<ul>
<li>Illustration</li>
<li>Printwork</li>
<li>Merchandise</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>';
?>
CSS
nav ul {
/* [disabled]box-shadow: 0px 0px 9px rgba(0,0,0,0.15); */
padding: 10px 30px;
/* [disabled]border-radius: 10px; */
list-style: none;
position: relative;
z-index: 2;
display: block;
background-color: #1c6130;
background-position: top;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background-color: #FFFFFF;
}
nav ul li:hover a {
color: #1c6130;
}
nav ul li a {
display: inline;
padding: 20px 40px;
color: #ffffff;
text-decoration: none;
}
nav ul ul {
background: #ffffff; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
/* border-top: 1px solid #6b727c; */
/* border-bottom: 1px solid #575f6a; */
position: relative;
}
nav ul ul li a {
padding: 0px 30px;
color: #fff;
}
nav ul ul li a:hover {
background-color: #CCCCCC;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Apologies if this is a completely novice question.
My guess: Your "html" file is actually named something.html, which causes the webserver to not recognize it as PHP. Rename it into something.php.
To verify that this was the problem, check the source of your HTML page, you should see the literal PHP code displayed there.
Might be you misnamed any file. just follow the instruction and keep all files in the same folder
File-index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="menu.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My index page</title>
</head>
<body>
<div id="buttonstrip">
<?php include 'menubar.php';?>
</div>
</body>
</html>
Menu file-menu.php
<?php
echo '<nav>
<ul>
<li>Computing
<ul>
<li>For Individuals
<ul>
<li>Repair</li>
<li>Maintenance</li>
<li>New Builds</li>
<li>Tuition</li>
</ul>
</li>
<li>For Business
<ul>
<li>Appraisals</li>
<li>Installation</li>
<li>Maintenance</li>
<li>Upgrades</li>
</ul>
</li>
</ul>
</li>
<li>Branding
<ul>
<li>Logos & Branding</li>
<li>Stationary</li>
<li>Guidelines</li>
</ul>
</li>
<li>Web Design
<ul>
<li>For Individuals</li>
<li>For Business</li>
</ul>
</li>
<li>Graphic Design
<ul>
<li>Illustration</li>
<li>Printwork</li>
<li>Merchandise</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>';
?>
Menu css->menu.css
nav ul {
/* [disabled]box-shadow: 0px 0px 9px rgba(0,0,0,0.15); */
padding: 10px 30px;
/* [disabled]border-radius: 10px; */
list-style: none;
position: relative;
z-index: 2;
display: block;
background-color: #1c6130;
background-position: top;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background-color: #FFFFFF;
}
nav ul li:hover a {
color: #1c6130;
}
nav ul li a {
display: inline;
padding: 20px 40px;
}
<div id="buttonstrip">
<?php include ('menubar.php');?>
</div>
This appears correct. Only thing to check is the path of your include file.
Make sure your menubar.php is indeed located on the same folder as your script that includes it.
Make sure there are no spelling errors also on file name.
Create a menu.php file and include this file in php page where you want to show menu.
To include menu file in php file use <?php include "menu.php"; ?>
Below code is for menu.php
<div class="menu">
<ul>
<li>Insert</li>
<li>Update</li>
<li>Delete</li>
<li>Display</li>
<li>GUI</li>
</ul>
</div>

wordpress style menu manager

I'm trying to make a WordPress style menu manager for my own CMS using php and jquery-ui. I already made the first steps but I don't really know how should I carry on especially how to realize the parent-child relationship between menu items. My actual code looks like
<style>
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
</style>
<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-state-highlight"
});
$( "#sortable" ).disableSelection();
});
</script>
<div class="admin_menus">
<ul id="sortable">
<?php foreach($menus as $menu): ?>
<?php if(array_key_exists('children', $menu)):?>
<li class="ui-state-default">
<?= $menu['name'] ?>
<ul class="dropdown-menu_test">
<?php foreach($menu['children'] as $menu_child):?>
<li class="ui-state-default" ><?= $menu_child['name'] ?></li>
<?php endforeach;?>
</ul>
</li>
<?php else:?>
<li class="ui-state-default" ><?= $menu['name'] ?></li>
<?php endif;?>
<?php endforeach;?>
</ul>
</div>
where $menus holds my menu items retrieved from database
You can use this plugin to implement draggable menu feature in your website
http://dbushell.github.io/Nestable/
It is simple to use, and you can customize on your own.

Categories