I want to put my menu in a separate PHP file so when I need to edit it, I only have to edit it once. The problem starts when I want to highlight the active page. Can someone help me to fix it?
<?php $currentPage = basename($_SERVER['SCRIPT_FILENAME']); ?>
Toggle navigation
<li></span> Home</li>
<li></span> About us</li>
<li class="dropdown">
<span class="glyphicon glyphicon-calendar"></span> Services <span class="caret"></span>
<ul class="dropdown-menu">
<li></span> Drivers services</li>
<li></span> Shop services</li>
</ul>
</li>
<li></span> On-line Application</li>
<li></span> Contact us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="clearfix"> </div>
</div><!-- navbar -->
I find the solution to my question adding this css in styles file:
/* The here ID identifies the current page and applies a white color to the text and a black background as a visual indicator. */
a#here {
background-color: #000 !important;
color: #fff !important;
}
Plus call the menu in each page with following code:
<div> <?php
$file ='includes/menu.php';
if (file_exists($file) && is_readable($file)) {
include($file);
} else {
throw new Exception("$file can't be found");
}
include('includes/menu.php');?>
</div>
A quick and dirty method to achieving this is in each file put the following:
<?php
include("header.php"); // Insert location of header file here
?>
and in your header.php file after creating your head block insert this
<?php $active= substr(basename($_SERVER['SCRIPT_FILENAME']),0, -4); ?> // Page Name
<body <?php echo "class='$active'";?>> // This sets the bodies class to be the page name.
finally in style.css use the following code to set the highlighted feature
// This is an example for my CSS. Insert your own css selector
// In my css i have this which adds a small orange bar to the bottom of the navigation option. I set the opacity to 0 to not display it.
.header nav ul li a:before
{
height: 5px;
background: #ea5c18;
opacity: 0;
}
// Then i set .PageName (the bodies class name) and set that specific nav element to have an opacity of 1.
.PageName .header nav ul li:first-child a:before
{
opacity:1;
}
Related
I have a complex view on Laravel with a lot of tabs and forms, the user can navigate on the tabs and do various form submits on every tab, after the submit the controllers returns the same view with a current tab variable, looks like this:
...Controller actions...
return view("store.tesla.user.components")
->with('tab', '3');
Every tab got an ID so when I go back to my view I just search for the active tab and put active with jQuery like this:
var tb_active = <?php echo $tab; ?>
$('#'+tb_active).addClass('active');
Actually it works, but I feel dirty mixing PHP+JS specially using Laravel framework and looks not so well done, so there are my question/s:
There is another way to do it better or more simple?
My view is extremly big and I have a lot of css classes, if I copy my code there it will be messy, so I fork a codepen with bootstrap tabs for better showing :)
https://codepen.io/Troyer/pen/MbGQPJ
HTML
<div class="container"><h1>Bootstrap tab panel example (using nav-pills) </h1></div>
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active">
Overview
</li>
<li>Using nav-pills
</li>
<li>Applying clearfix
</li>
<li>Background color
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<h3>Content's background color is the same for the tab</h3>
</div>
<div class="tab-pane" id="2a">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
<div class="tab-pane" id="3a">
<h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
</div>
<div class="tab-pane" id="4a">
<h3>We use css to change the background color of the content to be equal to the tab</h3>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
CSS
body {
padding : 10px ;
}
#exTab1 .tab-content {
color : white;
background-color: #428bca;
padding : 5px 15px;
}
#exTab2 h3 {
color : white;
background-color: #428bca;
padding : 5px 15px;
}
/* remove border radius for the tab */
#exTab1 .nav-pills > li > a {
border-radius: 0;
}
/* change border radius for the tab , apply corners on top*/
#exTab3 .nav-pills > li > a {
border-radius: 4px 4px 0 0 ;
}
#exTab3 .tab-content {
color : white;
background-color: #428bca;
padding : 5px 15px;
}
Thank you for your time.
Have you tried hidden fields. You can set that tab active by read that hidden value like:
$( ".selector" ).tabs({ active: $('#your-hidden-fiel').val() });
See the full example.
create an array in js below your content section
var pagedefaults = {
activetab: "{{ $activetab }}",
};
Here $activetab is coming from your controller. Now you can use active tab value like pagedefaults.activetab in your javascript and make tab active.
This can also be used in localisation and Ajax Routes.
I am trying to add '+' Symball in front of category navigation on left side
I am using magento 1.9.x
This code i fount in category-navigation.phtml
I want to know how <?php echo $_menu ?> this comes from?
<div class="block vertical-menu">
<div class="title-block" style="margin-bottom:0px;"><h4><?php echo $this->__($title) ?></h4></div>
<div class="block-content">
<ul id="content-navigation">
<?php echo $_menu ?>
</ul>
</div>
</div>
My suggestion would be to do it in CSS. You can use Ionicons or something similar.
The $_menu html is generated inside the block class, rather than using a phtml file. So, you could extend that block and customize it, but this can also be achieved using CSS without having to worry about extending the block.
An example would be the following:
Example HTML
<nav id="nav">
<ol>
<li>Plus Sign</li>
<li class="active">Minus Sign</li>
</ol>
</nav>
Example CSS - This requires Ionicons
ol {
list-style: none;
}
#nav li::before {
font-family: Ionicons;
content: '\f489';
padding-right: 10px;
}
#nav li.active::before {
content: '\f209';
}
JS Fiddle - A working sample
https://jsfiddle.net/adpro/5xbw80b1/
I have menu as follows
<ul>
<li>Home</li>
</ul>
how to make it Active when I visit that Page. I tried as follows but no luck
#navigation a:active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
I'm new webie thanks for any suggestions
Add id to your code as below
Update
<div id="menu">
<ul>
<li id="myHome">Home</li>
</ul>
</div>
Write Script as Below
<script>
window.onload = menuSelect('myHome');
</script>
Each page has a class on the body tag that identifies it:
BODY OF HOME PAGE:
<body class="home">
<ul>
<li>Home</li> //Each navigation item also includes a class identifying that particular link.
<li>About Us</li>
</ul>
</body>
BODY OF ABOUT US PAGE:
<body class="aboutUs">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</body>
Then you target those classes in your CSS, defining a different state for the current page:
CSS STYLE:
body.home a.home, body.aboutUs a.aboutUs{
//HERE GOES YOUR CSS
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
In your index.php page, you need to edit the HTML this way:
<ul>
<li>Home</li>
</ul>
In other pages, say about.php, you might have something like this:
<ul>
<li>Home</li>
<li>About</li>
</ul>
And change the CSS to .active and not :active, as the second one is a state of element:
#navigation a.active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
The :active pseudo-selector is for when an element is well, active, for example while a link is being clicked.
What you will need to do is give your <a> element a class attribute and style it accordingly.
I've never used the php include function but I recently read some good articles which encourage ti.
I'm going to use it mainly for menus and footers, but here's my question:
How can I attach a HTML class to a menu element.
e.g.
menu.php
<nav>
<ul>
<li>home</li>
<li>blog</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
index.html
<?php include 'menu.php'; ?>
In this case how do I set a class to any of these menu elemnts without using different menu.php files?
Long story short I need it so I can apply certain styles to a single element in the list, and each html file will match the specific menu voice
E. G. index.html will have the "home" anchor styled differently than other three elements.
Thanks in advance.
As per these examples
You can make use of option #2
CSS
#nav {
width:150px;
list-style:none;
}
#nav a {
color:black;
text-decoration:none;
}
#nav a:active, #nav a:focus, #nav a:hover {
color:red;
}
#home #homenav, #about #aboutnav, #contact #contactnav {
color:red;
}
#home #homenav:hover, #about #aboutnav:hover, #contact #contactnav:hover {
color:blue; /* add :active and :focus styles here also */
}
HTML
<body id="home"> <!-- the body needs a unique id -->
<ul id="nav"> <!-- each anchor needs a unique id -->
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</body>
Give your elements ids and set the class in the including file.
Look at this
http://jsfiddle.net/esTzk/
How come the color on my #header won't apply ?
Give it a height or hide the overflow and it will. Either will work in this case.
#header{
background:#2b2b2b;
color:#fff;
width:100%;
height:200px; /* overrides float calculations */
overflow:hidden; /* clears floats */
}
http://jsfiddle.net/AlienWebguy/esTzk/1/
Give your header a height, because you dont want it be greater than a certain value anyway:
#header{
background-color:#2b2b2b;
color:#fff
width:100%;
height:20px;
}
a better solution would be to move the div with clear both inside the header.
<div id="header">
<ul id="nav">
<li>Service Provider
<ul>
<li>Vendor / Manufacturer</li>
<li>Service Type</li>
<li>Service Technician</li>
</ul>
<div style="clear:both"></div>
</li>
<li>Cities & Stations
<ul>
<li>Stations</li>
<li>Station Owner</li>
</ul>
<div style="clear:both"></div>
</li>
<li>Firefighter</li>
<li>PPE Management</li>
<li>Care & Maintenance</li>
<li>Logout</li>
</ul>
<div style="clear:both"></div>
</div>
Just to add for your knowledge, it is because of the float:left in the #nav li selector. Because the elements inside the #header div are floated the #header div is set to height=0. That's why it won't display the background color before you specify a height for it or clear the float.