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;
}
Related
I am trying to have the active page number highlighted, but having no success in getting to work. Can anyone help please.
this is the CSS for the pagination
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .5s;
}
.pagination a.active {
background-color: dodgerblue;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
This the pagination code :
<div class="pagination">
<?php
$get = $_GET;
$current_page = isset($get['page'])?$get['page'] : 1;
for($i=1;$i<=$tpages;$i++) {
$get['page'] = $i; // set the page parameter
$qs = http_build_query($get,'','&');
if($i==$current_page) {
echo "current_page $current_page <br />";
$pagLink .= "<class='active'><a href='despatchdata_results.php?$qs'>$i</a>";
}else{
$pagLink .= "<a href='despatchdata_results.php?$qs'>$i</a>";
}
?>
</div>
This
$pagLink .= "<class='active'><a href='despatchdata_results.php?$qs'>$i</a>";
is malformed.
Your active style applies to the a element (a inherits the active class, as you can see in the CSS definition of the style a.active)
Try this:
$pagLink .= "<a class='active' href='despatchdata_results.php?$qs'>$i</a>";
and let me know if it solves it
Try putting the class name inside of the a tag, for example;
<a class=“classname”>Link text</a>
Your CSS does not match your generated HTML, also your HTML is not valid:
.pagination .active a {
background-color: dodgerblue;
color: white;
}
.pagination div:not(.active) a:hover {background-color: #ddd;}
and update your generated HTML with:
$pagLink .= "<div class='active'><a href='despatchdata_results.php?$qs'>$i</a></div>";
I have a php form. Here drop down menu is created with php mysql. Menu is simple menu. I need to add right arrow for sub-child and down arrow for child menu with css. I am unable to modify the css. Plz suggest me how to make this drop down menu more attractive.
<style>
ul {list-style: none; padding: 0; margin: 0; background: #1bc2a2;}
ul li {display: block; position: relative; float: left; background: #1bc2a2;}
li ul { display: none; }
ul li a {display: block; padding: 1em; text-decoration: none; white-space: nowrap; color: #fff;}
ul li a:hover { background: #2c3e50; }
li:hover > ul {display: block; position: absolute;}
li:hover li { float: none; }
li:hover a { background: #1bc2a2; }
li:hover li a:hover { background: #2c3e50; }
.main-navigation li ul li { border-top: 0; }
ul ul ul {left: 100%; top: 0;}
ul:before, ul:after {content: " "; display: table;}
ul:after { clear: both; }
</style>
This is database table.
CREATE TABLE tbl_menu(
id INT AUTO_INCREMENT PRIMARY KEY,
label VARCHAR(20) NOT NULL,
parent INT DEFAULT NULL
);
INSERT INTO tbl_menu VALUES
(1,'ELECTRONICS',0),
(2,'TELEVISIONS',1),
(3,'COMPUTER',1),
(4,'DELL',3),
(5,'LCD',2),
(6,'PLASMA',2),
(7,'FLASH',6),
(8,'BIKE',0),
(9,'MOTORCYCLE',8),
(10,'SCOOTER',8),
(11,'BAJAJ',9),
(12,'MAHINDRA',10);
This is php query.
<?php
$con=mysqli_connect("localhost","root","","nfs");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
function get_menu_tree($parent)
{
global $con;
$menu = "";
$sqlquery = " SELECT * FROM tbl_menu where parent='" .$parent . "' ";
$res=mysqli_query($con,$sqlquery);
while($row=mysqli_fetch_array($res,MYSQLI_ASSOC))
{
$menu .="<li><a href='#'>".$row['label']."</a>";
$menu .= "<ul>".get_menu_tree($row['id'])."</ul>"; //call recursively
$menu .= "</li>";
}
return $menu;
}
?>
<ul class="main-navigation">
<?php echo get_menu_tree(0); ?>
</ul>
Try adding this::
ul li {position: relative;}
ul li::after {content: "▼"; position: absolute; top: 10px; right: 10px; font-size: 20px;}
Try This
menu > li ul a {
padding: 11px 0 11px 30px;
font-size: 13px;
}
menu a, #menu a:hover, #menu a:focus, #menu a:active {
text-decoration: none;
}
menu li, #menu a {
position: relative;
display: block;
}
menu a {
position: relative;
display: block;
}
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>";.
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 want to display images and their description(on hover) dynamically in a localhost application.
I am getting a vertical output:
but I want the images to be show horizontally (to a certain extent), like this:
I tried the following
PHP
<?php
$c = mysql_connect("localhost", "abc", "xyz");
mysql_select_db("root");
$q = "select * from product";
$qc = mysql_query($q);
$count = 0;
while ($ans = mysql_fetch_array($qc)) {
if ($count == 0 || $count == 1 || $count == 2) {
$title = $ans[1] . " " . $ans[2];
print '<div class="img-wrap">';
print "<img id='display_img' src='products/$ans[8]'width=300 height=200 title='$title'>";
print '<div class="img-overlay">';
print '<h4>' . $title . '</h4>';
print '<p>' . $ans[9] . '</p>';
print '</div>';
print '</div>';
}
$count++;
if ($count == 3) {
print "<br />";
$count = 0;
}
}
?>
CSS
.img-wrap {
height:200px;
position:relative;
width:300px;
margin:10px;
}
.img-overlay {
background-color:#000;
bottom:0;
color:#fff;
height:200px;
width:300px;
opacity:0;
position:absolute;
z-index:1000;
transition-duration:0.5s;
cursor:pointer;
}
.img-overlay h4, .img-overlay p {
padding:0 10px;
}
.img-wrap:hover .img-overlay {
opacity:0.75;
transition:opacity 0.5s;
}
b {
background-color:#aa490e;
color:#fff;
font-size:36px;
padding: 0 15px;
padding-left:65px;
padding-bottom:25px;
font-family:"Courier New", Courier, monospace;
}
Try changing .img-wrap as following:
.img-wrap
{
float:left;
clear:none;
height:200px;
position:relative;
width:300px;
margin:10px;
}
You can add display: inline-block to .img_wrap:
.img-wrap {
...
display: inline-block;
}
Or you can use float: left. But in this case make sure you clear: both after the last item.
http://jsfiddle.net/tRRVv/