I am using a bootstrap pagination menu on my website to navigate from one page to another page.
I copied the pagination menu from :
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pagination_active&stacked=h
and added this to all pages of my website .
It's works fine and I can set the Active Status using:
<li class="active">
1</li>
according to the page link where the code is.
For some reasons ,I want to have only one menu file and include it to all pages .
Is there a way to automatically add ".active" class to the links in included menu?
menu.php
<ul class="pagination">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
Please help!
You can do it depending on your setup. In javascript, using jQuery for example:
var currentPage = 2; //say the page is defined like this
$('.pagination li').eq((currentPage-1)).addClass('active');
If you generating pages server side, for example in PHP
$currentPage = 2;
$output = '<ul class="pagination">';
//iterating pages
if($pageNum == $currentPage){
$output .= <li><a class="active" href="pages/'+$pageNum+'.php">'+$pageNum+'</a></li>
} else {
$output .= '<li>'+$pageNum+'</li>';
}
$output .= '</ul>'
echo $output;
Related
I have a navigation bar page that I can use for all the pages in my website. However, I built a new login page but it is having errors when I connect to the navigation bar page.
The structure of all my files:
I want to apply the navigation bar to my login.php under the uploadTesting2 file. The code for navigation bar I have put in my login.php is :
<?php include '../navHeader.php'; ?>
The code in the navHearder.php is:
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About</li>
<li>News</li>
<li class="dropdown">
Collection <b class="caret"></b>
<ul class="dropdown-menu">
<?php
include './data.php';
for ($i = 0; $i < count($collectionArr); $i++) {
echo '<li>';
echo '<a href=\'collectionPage.php?cat=' . $collectionArr[$i]['catCode'] . '\'>';
echo $collectionArr[$i]['catName'];
echo '</a>';
echo '</li>';
}
?>
</ul>
</li>
<li>Ordering</li>
<li>Contact</li>
<li>Admin</li>
</ul>
</div>
However, the code is not working. When I click the index.php, it will show error. the url is wrong and the url is showing: http://localhost:7777/ca2/CA2script/uploadTesting2/index.php
Should I apply one more navgation php in my uploadTesting2 or I can make changes in the navHeader.php?
For best practice define your main(base) url as constant then use it any where.
Suppose your base url is "http://localhost:7777/ca2/CA2script/"
You can do it like following:
define('BASE_URL',"http://localhost:7777/ca2/CA2script/");
then in any file you can use it for link
Ex: in your navHearder.php use like this:
<li class="active">About</li>
suppose your file is in directory then:
link
Problem with include
The include statement relates file according to the location relative to the entry point. For example, if you have a file structure like this:
/
/uploadTesting2
/login.php
/navHeader.php
/data.php
When you visits /uploadTesting2/login.php as the entry point, the location of navHeader.php and data.php should be ../navHeader.php and ../data.php. This is true even within the scripts included by login.php. So navHeader.php should only find data.php in as ../data.php.
A usual way to solve this issue is to use __DIR__ constant as a reference. This constant will always to be the script file's parent folder (not the entry file). If you echo __DIR__ inside navHeader.php, it will be the system path of your root no matter what is including it.
Thus instead of this include statement:
include './data.php';
you may do this:
include __DIR__ . '/data.php';
Problem with links
Links is also resolved relative to your current path. Thus
<a href="collectionPage.php?cat=abc">
in /uploadTesting2/index.php URL resolves to /uploadTesting2/collectionPage.php?cat=abc. Instead you should do
<a href="../collectionPage.php?cat=abc">
I have a code like this.
<ul>
<?php foreach (getUserMainMenus($get_user_id) as $get_main_menu): ?>
<li class='has-sub'><a href='#'><span><?=$get_main_menu['menu_name']; ?></span></a>
<ul>
<?php foreach (getUserChildMenu($get_main_menu['m_id'], $get_user_id) as $sub_menu): ?>
<li class='has-sub'><a href='<?=$sub_menu['menu_url']; ?>'><span><?=$sub_menu['menu_name']; ?></span></a>
<ul>
<?php foreach (getUserSubChildMenu($sub_menu['m_id'], $get_user_id) as $sub_sub_menu): ?>
<li class='has-sub'><a href='<?=$sub_sub_menu['menu_url']; ?>'><span><?=$sub_sub_menu['menu_name']; ?></span></a></li>
<?php endforeach; ?>
</ul>
</li>
<?php endforeach; ?>
</ul>
</li>
<?php endforeach; ?>
</ul>
And the result set for the second foreach is like this.
Array ( [m_id] => 9 [menu_name] => MenuName [parent_menu_id] => 4 [menu_order] => 1 [menu_url] => menu1.php [status] => 1 )
How to check a if condition after all foreach statement.
In other words, i need to get the $sub_menu values and if there is values show the li tag.
Also - I need to check the $sub_sub_menu variable, and if there is values show the li tag.
How can i achieve that?
Thanks,
Kimz
I guess you try to create a navigation menu. Where the sub entries should only appear when the top menu item is selected by the visitor of your page.
Is that right?
Ok if so. You might have in mind that.
if a user displays your page first. you might show only the top menu items.
if then a user selects one of the top menu items he/she clicks on a link an that reloads your script with some additional information.
Now your script needs to figure out which top menu item the user selected based on the additional information.
Depending on the selection of the user you might show or hide submenu items.
What your job here is, you have to make sure that your script detects which top-menu item is clicked at.
Do you need more help, or is it clear what to do?
Ok how about this as an basic example for dynamic php menus as test.php
<?php
$menu="";
extract( $_GET, EXTR_PREFIX_ALL, "url" );
if (isset($url_menu)){
$menu=$url_menu;
echo "you selected ".$menu."<br>";
}
echo "<ul>";
// top menu 1
echo '<li>Top1';
if ($menu=="top1"){
echo "<ul>";
echo "<li>Submenu</li>";
echo "</ul>";
}
echo "</li>";
// top menu 2
echo '<li>Top2';
if ($menu=="top2"){
echo "<ul>";
echo "<li>Submenu</li>";
echo "</ul>";
}
echo "</li>";
echo "</ul>";
?>
See any top menu item hands over the additional variable "menu". This is either "top1" or "top2" in this case. Now your script on reload checks whether "menu" is already set and depending on the value of "menu" it shows the corresponding sub menu.
There is still a long way to go, because in my case I use fixed menu items where in your case you load the menu items depending on the "userid".
Let me know if the example above works at your place and if you need additional support to adopt it to your dynamically loaded menus.
Following that idea you need to replace
<li class='has-sub'><a href='#'><span><?=$get_main_menu['menu_name']; ?></span></a>
by adding for example the variable name "level0"
<li class='has-sub'><a href='<?= ?level0=$sub_menu['menu_name']; ?>'><span><? $get_main_menu['menu_name']; ?></span></a>
then you can check in you sub menu if "level0" is set as you expect it and then show or hide the sub menu items.
I am developing a website using PHP and this is the 1st time I am trying a dynamic menu.
What I am doing is I have created a table for pages.
The table structure is as follows:
____________________________________________________________________________
|page_id|title|url|content|menu_title|show_on_navuigation|is_sub|parent_page|
|_______|_____|___|_______|__________|___________________|______|___________|
Here is_sub indicates whether it is a dropdown menu of some main menu. and parent_page is the main menu of the sub menu.
Now, what I want is, like
I have created 2 parent pages:
About Us and Test
and 2 sub menu's: Test aboutus and testsub,
Test aboutus is sub of About Us and testsub is sub of test.
How actually should the query and the loop, so that the menu renders perfectly.
Thanks in advance.
This is my menu structure:
<ul>
<li class='has-sub'><a href='#'><span>About Us</span></a>
<ul>
<li><a href='corporateprofile'><span>Corporate Profile</span></a></li>
<li class='last'><a href='visionandmission'><span>Vision & Mission</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Business Services</span></a>
<ul>
<li><a href='recruitment'><span>Recruitment</span></a></li>
<li><a href='training'><span>Training</span></a></li>
<li><a href='executivesearch'><span>Executive Search</span></a></li>
<li><a href='payroll'><span>Payroll</span></a></li>
<li class='last'><a href='backgroundverification'><span>Background Verification</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Employers</span></a>
<ul>
<li><a href='enquiry'><span>Enquiry</span></a></li>
<li><a href='jobdescription'><span>Job Description</span></a></li>
<li><a href='employercontract'><span>Employer Contract</span></a></li>
<li class='last'><a href='feedback'><span>Feedback</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='javascript:;'><span>Job Seeker</span></a>
<ul>
<li><a href='applyforjob'><span>Apply For Job/Register</span></a></li>
<li><a href='careertips'><span>Career Tips</span></a></li>
<li><a href='interview Questions'><span>Interview Questions</span></a></li>
<li><a href='interviewprocess'><span>Interview Process</span></a></li>
<li class='last'><a href='corporatedress'><span>Corporate Dress</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Franchise</span></a>
<ul>
<li class='last'><a href='#'><span>Franchise Enquiry Form</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>Contact us</span></a></li>
</ul>
<?php
function displayMenu($parent_page_id) {
$sql = "SELECT * FROM `pages` WHERE `parent_page` = '$parent_page_id'"; // sql
$result = mysql_query($sql);
if( mysql_num_rows($result) === 0 ) { // mysql_num_rows() is deprecated, but you are using mysql extension so that's why I show it here
return true; // exit function
} // else, continue to rest of function
echo '<ul>';
while($row = mysql_fetch_assoc($result)) { // deprecated mysql php function here for simplicity
echo '<li>' . $result['menu_title'] . ''; // no closing </li> yet
displayMenu($row['page_id']); // this is the recursive part
echo '</li>'; // close the <li> from before the recursion
}
echo '</ul>';
}
$get_base_menu = mysql_query("SELECT * FROM pages WHERE parent_page = 0");
while($fetch_base_menu = mysql_fetch_array($get_base_menu))
{
$parent_page_id = $fetch_base_menu['page_id'];
displayMenu($parent_page_id);
}
?>
I highly suggest trying to get away from using an Adjacency List model and move toward a much easier to manage solution, such as a nested set. Using an MPTT type solution should help you manage your hierarchical data much easier. Using an Adjacency List model you are limited at a certain point.
I'd suggest looking into using something along the lines of Zebra_MPTT, or some other form of MPTT library. Please checkout this article on Managing Hierarchical data in MySQL.
I think the simplest thing for you to code will be something like this recursive function. All you have to do is put it on your page and make sure you have parent_page_id = 0 for the base level menu items. (I'm using parent_page_id instead of parent_page because I assume that is what you mean and it is more clear for the answer.)
Calling the function with an argument of "0" should give you the full menu tree.
$trace = array();
function displayMenu($parent_page_id) {
$sql = "SELECT * FROM `tbl_menu` WHERE `parent_page_id` = $parent_page_id"; // sql
$result = mysql_query($sql);
if( mysql_num_rows($result) === 0 ) { // mysql_num_rows() is deprecated, but you are using mysql extension so that's why I show it here
$trace[] = "Page_id $parent_page_id has no children";
return true; // exit function
} // else, continue to rest of function
echo '<ul>';
while($row = mysql_fetch_assoc($result)) { // deprecated mysql php function here for simplicity
$trace[] = "Entered while loop for page_id = $parent_page_id"; // not an error, just tracking
echo '<li>' . $row['menu_title'] . ''; // no closing </li> yet
displayMenu($row['page_id']); // this is the recursive part
echo '</li>'; // close the <li> from before the recursion
}
echo '</ul>';
}
displayMenu(0); // call function for base level
var_dump($trace);
More info:
I have researched the topic before and had a nice link to a page on mysql.com with an in-depth exploration of hierarchical relational database structures. But when I checked, the link was broken!
But, I think I found it on another site, here:
http://mikehillyer.com/articles/managing-hierarchical-data-in-mysql/
I'm trying to create a function for a hierarchical navigational menu bar.
I want to be able to have something like this...
<ul id="navigation">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<ul>
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 1</li>
</ul>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
</ul>
I'm using this function, but it's not working properly like I'd like it to. It's showing the main parent links, but not the child links.
function build_navbar($pid,$sub=0)
{
global $db;
$query = $db->simple_select("navbar", "*", "pid='".$pid."'", array("order_by" => "disporder"));
$menu_build = "<ul id=\"navigation\">\n";
while($menu = $db->fetch_array($query))
{
if($sub == 1)
{
$menu_build .= "<ul>\n";
$menu_build .= "<li>".$menu['title']."</li>\n";
$menu_build .= "</ul>\n";
}
else
{
$menu_build .= "<li>".$menu['title']."</li>\n";
}
build_navbar($menu['id'],1);
}
$menu_build .= "</ul>\n";
return $menu_build;
}
Perhaps someone can help me fix this? Thanks.
--- New Update ---
Andy Groff, this is what your code is outputting:
<ul id="navigation">
<li>Home</li>
<ul>
<li>Child Link</li>
<li>Child 2</li>
</ul>
<li>Parent</li>
</ul>
However, I need it modified so it'll output like this:
<ul id="navigation">
<li>Home
<ul>
<li>Child Link</li>
<li>Child 2</li>
</ul>
</li>
<li>Parent</li>
</ul>
This is what it is outputting now, Andy:
<ul id="navigation">
</li>
<li>Home
</li>
<ul>
<li>
Child Link
</li>
<li>Child 2
</ul>
</li>
<li>Parent
</ul>
I think your problem could have something to do with the fact that your function is recursive, but the string you're building gets reset at the top of your function each time, instead of being passed into the function again. Also, I don't see anywhere that sub will get set back to zero for your final iteration. Additionally, it seems like you shouldn't need to query for each individual row. It would be more effective to query once and build the whole menu. I think the recursion can be ditched. Also, I would recommend storing a "sub" flag in your data, instead of using some hard to understand php logic as to whether or not a given row is a sub menu. I made modifications based of these concepts, no idea if it works or not though since I don't have/want to create the data to test it:
function build_navbar()
{
global $db;
//first things first, i'd recommend putting a "sub" flag in your database. This example will use it.
//start off by getting all of the rows. No need for recursion.
$query = $db->simple_select("navbar", "*", "1", array("order_by" => "disporder"));
$menu_build = "<ul id=\"navigation\">\n";
//keep track of what level we're at
$level = 1;
while($menu = $db->fetch_array($query))
{
//get sub from data
$sub = $menu['sub']
//we need to go back to root level
if($sub == 0 && $level == 2){
$level--;
$menu_build .= "</ul></li>\n";
}
else $menu_build .= "</li>\n";
//we need to go up one level
if($sub == 1 && $level == 1)
{
$level++;
$menu_build .= "<ul><li>\n";
}
else $menu_build .= "<li>";
//always print out a link
$menu_build .= "".$menu['title']."\n";
}
$menu_build .= "</ul>\n";
return $menu_build;
}
UPDATE:
Try this:
function build_navbar($pid, $sub=0)
{
global $db;
$class = $sub ? "sub" : "navigation";
$menu_build = "<ul class=\"$class\">\n";
$query = $db->simple_select("navbar", "*", "pid='".$pid."'");
while($menu = $db->fetch_array($query))
{
$menu_build .= "<li>".$menu['title']."\n";
// build child links
$menu_build .= build_navbar($menu['id'],1);
}
$menu_build .= "</ul>";
return $menu_build;
}
What we are doing here, is allowing each function to build a <ul><li> group, the $sub variable will determine what the ID of the <ul> will be, allowing you to theme each ul differently.
EDIT:
I found it!
this line
build_navbar($menu['id'],1);
needs to be changed to this:
$menu_build = build_navbar($menu['id'],1);
It looks like it should work to me.
What I would do is add some echo statements displaying the SQL query that is being executed each time, then you can copy that into phpmyadmin (or what ever db browser you use). See if it also returns a null result. If it does, there might be something wrong with your data as well.
so for example:
echo "SELECT FROM navbar * WHERE pid='$pid' ORDER_BY disporder;<br>";
Hi
I am going to highlight a menu item according to the page that is reading currently, when user click on different page through the menu, that menu item will be highlighted, example is http://templates.joomlart.com/ja_pyrite/index.php?option=com_content&view=article&id=44&Itemid=53.
If I use PHP/jQuery to check the url and highlight the menu, it will be good if the url look like "http://example.com/contact", but the example above is bad.
If I don't going to check the url and highlight the menu item, could someone give me a idea/method that can be done with the same effect?
Thank you
I found this on 960 Development, been googling for a while for this, so happy when I finally found it!
<ul class="sub-nav" >
<?php
$full_name = $_SERVER['PHP_SELF'];
$name_array = explode('/',$full_name);
$count = count($name_array);
$page_name = $name_array[$count-1];
?>
<li><a class="<?php echo ($page_name=='where-to-buy.php')?'active':'';?>" href="where-to-buy.php">WHERE TO BUY</a></li>
<li><a class="<?php echo ($page_name=='about.php')?'active':'';?>" href="about.php">ABOUT US</a></li>
<li><a class="<?php echo ($page_name=='contact.php')?'active':'';?>" href="contact.php">CONTACT US</a></li>
It is working fully for me, get the pages I need to be "active" to be active and dosent active any of thoes who got the class when I'm in another page!
Take a look at it!
Edit:
Even if you got a (in this example) contact.php?person=John, it will "active" the contact.php link!
do something like this
<div id="nav_menu">
<?php
$currentFile = $_SERVER['REQUEST_URI'];
$pages = array(
array("file" => "/index.php", "title" => "Home"),
array("file" => "/about.php", "title" => "About Us"),
array("file" => "/schedule.php", "title" => "Schedule")
);
$menuOutput = "<ul>";
foreach ($pages as $page) {
$activeAppend = ($page["file"] == $currentFile) ? " id='active' " : "class='nav_button'";
$currentAppend = ($page["file"] == $currentFile) ? " id='current' " : "class='nav_button'";
$menuOutput .= "<li " . $currentAppend . ">"
. "<a href='" . $page["file"] . "' id='".$page["id"]."'>" . $page["title"] ."</a>"
. "</li>";
}
$menuOutput .= "</ul>";
echo $menuOutput;
?>
</div>
i hope you get the idea, i had this on stackoverflow a while ago but i forgot what was the question
edit:
here i finnally found the original question
In the HTML code you use to generate your navigation, add some PHP logic that will add a selected class to the button of the page that you are currently on. Then just add some CSS for the selected class.
Can you do something like this? It should select any link that points at the current page - so you can apply whatever you like to highlight it.
$('a[href="'+window.location+'"]').addClass('menu-highlight');
A good technique is to add a specific class or id attribute to body element and then style it in CSS. It requires minimum of server side programming and keeps all the presentation logic in CSS as it should be done.
<style>
.contact #contact { background:#000; }
...
</style>
<body class="contact">
<ul>
<li id="homepage">Homepage</li>
...
<li id="contact">Contact</li>
</ul>
...