I made a menu with bootstrap and php. It works fine but when I use it with an include in another php file the dropdown items are not seen. I don't know if I'm missing a div or should I use something else?
this is my menu.php code:
<body>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark sticky-top">
<ul class="navbar-nav">
<!-- Brand/logo -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Administracion</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="ajuste.php">Ajuste Cota</a>
<a class="dropdown-item" href="estaciones.php">Estaciones</a>
<a class="dropdown-item" href="panel.php">Panel de Control</a>
<a class="dropdown-item" href="permisos.php">Permisos</a></div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Medicion</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="">Puesto 1</a>
<a class="dropdown-item" href="">Puesto 2</a>
<a class="dropdown-item" href="">Puesto 3</a>
</div>
</li>
</ul>
</nav>
</body>
and this is how I use this in another php file
<body>
<?php include("menu.php");?>
<br>
<div class="container">
.
.
.
</body>
I should see the menu as follows:
menu.php:
But when I use menu.php in other file (as include) the menu item does not diplay
menu.php used as include file:
Can someone guide me how to fix this?
Too many <body> tags...you should only have one set (<body>...</body>) in your whole page. You don't need them in the menu file if that's going to be included in another file.
Related
Running into an interesting issue with a site I am building. The dropdown menu for one option stops working when I get to a url that includes an id in it.
As an example, if I am at http://localhost/degs/serpstudentsinclass.php?id=3, if I click on the Admin dropdown nothing happens. If I click back to the home page http://localhost/degs/index.php, Admin drop down menu starts working no problem.
This also adds an additional issue when working from a mobile device. Once you reach http://localhost/degs/serpstudentsinclass.php?id=3, you completely lose the ability to use the navigation menu (as now it's a complete drop down menu due to screen size). So you have to again go back to the index.php and then the menu will begin to work again.
Any thoughts on why this might be?
Header file
<?php
// session file
include_once 'includes/session.php';?>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../css/site.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title><?php echo $title ?></title>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="index.php">DEGS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="serpentine.php">Serpentine</a>
</li>
<li class="nav-item">
<a class="nav-link" href="uturn_box.php">U-Turn Box</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blocked_evasive.php">Blocked Evasive</a>
</li>
<li class="nav-item">
<a class="nav-link" href="forward_reverse.php">Forward Reverse</a>
</li>
<li class="nav-item">
<a class="nav-link" href="controlled_braking.php">Controlled Braking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cumulative_skills_day.php">Cumulative Skills - Day</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cumulative_skills_night.php">Cumulative Skills - Night</a>
</li>
<li class="nav-item">
<a class="nav-link" href="evoc_challenge.php">Evoc Challenge</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="users.php">Users</a>
<a class="dropdown-item" href="classes.php">Classes</a>
<a class="dropdown-item" href="students.php">Students</a>
<a class="dropdown-item" href="legends.php">Legend</a>
<a class="dropdown-item" href="tests.php">Tests</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<?php
if(!isset($_SESSION['userid'])){
?>
<a class="nav-link" href="login.php">Login <span class="sr-only">(current)</span></a>
<?php } else { ?>
<li class="nav-item"><a class="nav-link" href="logout.php">Logout <span class="sr-only">(current)</span></a></li>
<?php } ?>
</li>
</ul>
</div>
</nav>
Page where problems start - other pages follow a similar pattern where you select the class to get the list of students.
<?php
$title = "DEGS - Students";
require_once 'includes/header.php';
require_once 'includes/auth_check.php';
require_once 'db/conn.php';
if(!isset($_GET['id'])){
echo 'error';
} else {
$id = $_GET['id'];
$results = $admin->getStudents($id);
$class = $admin->getClassDetails($id);
$students = $admin->getStudents($id);
}
?>
<h1>Serpentine - Class <?php echo $class['class']?></h1>
<br/>
<br/>
<table class="table">
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Agency</th>
<th>Class</th>
<th># of Attempts</th>
<th>Student Operations</th>
</tr>
<?php while($r = $results->fetch(PDO::FETCH_ASSOC)) { ?>
<tr>
<td><?php echo $r['lname']?></td>
<td><?php echo $r['fname']?></td>
<td><?php echo $r['agency']?></td>
<td><?php echo $class[1]?></td>
<td><?php echo $serpentine->getAttemptCount($r['student_id']) ?></td>
<td>
View Attempts
Add Attempt
</td>
</tr>
<?php }?>
</table>
I figured it out! I didn't include my footer at the end! Hope this helps anyone else who run into this issue!
I am created a navigation bar with bootstrap. I want to get the navigation menu item name with PHP code. I was trying to do that with 'GET' method but I cannot do that without changing the page. Here I attached the nav-bar code.
<body>
<!-- ======================== Navigation Bar ============================== -->
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light static-top">
<div class="container-fluid p-0" id="navbarSupportedContent">
<a class="navbar-brand" href="#"><img src="../images/logo.png"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<div class="hori-selector"><div class="left"></div><div class="right"></div></div>
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<?php
echo "Selected Item"; // display selected navigation item here.
?>
</body>
</html>
This is my index.php page body. I want to get the selected item name on the same index.php page. Please can anyone help me?
I used JavaScript and Ajax to solve this
I will need some help with the menu showing on mobile. When the STORE menu is clicked on mobile version it does not expand and instead closes the general menu. Here is the link of the web page. Any help will be appreciated.
<body> looks like
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar">
Menu HTML
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse header-transparent">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand page-scroll logo no-margin" href="#page-top"><img src="images/logo-uk.png"></a>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav ml-auto ">
<li class="nav-item active">
<a class="page-scroll nav-link" href="#page-top">HOME </a>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="#frames"></a>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="ppgtrikes.php"></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
STORE
</a>
<div class="dropdown-menu">
<a class="page-scroll nav-link" href="#engines">
<font color="#000000"></font>
</a>
<a class="page-scroll nav-link" href="#harnesses">
<font color="#000000"></font>
</a>
</div>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="#contact"></a>
</li>
</ul>
</div>
</div>
<!-- End of Container -->
</nav>
You have 2 Bootstrap navs, one inside the other.
UPDATED
In this file http://www.evoaviation.co.uk/js/custom.js you have part of code at the beginning
//Auto Close Responsive Navbar on Click
function close_toggle() {
if ($(window).width() <= 768) {
$('.navbar-collapse a').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.navbar .navbar-inverse a').off('click');
}
}
Replace it with following
//Auto Close Responsive Navbar on Click
function close_toggle() {
if ($(window).width() <= 768) {
// checking if there is no 'data-toggle' in <a>
$('.navbar-collapse a:not([data-toggle])').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.navbar .navbar-inverse a').off('click');
}
}
I use bootstrap theme bs-admin-bcore and I want to make menu in file "menu.php" to be more dynamic.
For example, I have this code :
<ul id="menu" class="collapse">
<li class="panel">
<a href="index.php" >
<i class="icon-table"></i> Dashboard
</a>
</li>
<li class="panel ">
<a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#component-nav">
<i class="icon-tasks"> </i> UI Elements<span class="pull-right"><i class="icon-angle-left"></i></span> <span class="label label-default">10</span>
</a>
<ul class="collapse" id="component-nav">
<li class=""><i class="icon-angle-right"></i> Buttons </li>
</ul>
</li>
</ul>
when I call index.php <li class="panel"> becomes <li class="panel active"> and when I call button.php EU Elements becomes active.
You have to add "active" class to the parent li of buttons as well n it will work.
How can I create a drop down menu using twitter bootstrap. my current navigation is
<ul class="nav nav-tabs " style="width: 860px;">
<li >
<a href="#" >Employees</a>
</li>
<li >
<a href="#" >Projects</a>
</li>
<li >
<a href="#" >Clients</a>
</li>
<li >
<a href="#" >Assign Projects</a>
</li>
<li >
<a href="#" > Reports</a>
</li>
<li><a href="logout.php" >Logout</a></li>
here I want a drop down menu for Reports link
See that example: http://jsfiddle.net/jrV6u/
And include to your page this scripts:
jQuery
Bootstrap Dropdown Plugin
Boostrap already have that http://twitter.github.com/bootstrap/components.html#dropdowns
<div class="dropdown">
<!-- Link or button to toggle dropdown -->
Drop me!
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>