I've been working on a web app project for school, and I've designed an expanding sidebar with HTML/CSS. The sidebar is supposed to have a z-index greater than everything else on the page. I use Chrome, so I didn't notice until recently that in Safari Version 14.0.3 (on MacOS Big Sur 11.2.3), my sidebar only behaves properly some of the time, sometimes appearing on top of the contents of the page as intended, and other times appearing on top of everything except a table on one of the pages (player-search.php). I was hoping I could get some advice as to how to fix this problem, as I've never seen an issue like this before. Many thanks in advance, and happy to provide additional info.
Here is a screenshot of the behavior on Chrome
&
here is a screenshot of the behavior on Safari.
It's also hosted on Heroku here if you want to interact with it.
Here is the file structure:
project/
│ player-search.php
│
│────css/
│ reset.css
│ styles.css
│ sidebar.css
│
└────includes/
footer.php
header.php
sidebar.php
Here is the relevant code:
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fantasy Soccer</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<?php function isCurrentPath($path) {...} ?>
<body>
<div style="display: grid; grid-template-rows: 10vh 90vh; width: 100vw; height: 100vh; color: white;">
<div class="top-bar">
<a style="height: 100%; text-decoration: none; padding: 0 25px; color: white;" href="/">
<div style="display: flex; align-items: center; height: 100%; font-size: 32px;">Upper90</div>
</a>
<div style="font-size: 45px; padding: 0 25px;"><a style="text-decoration: none; color: white; height: 100%; display: flex; align-items: center;" href="/"><i class="far fa-user-circle"></i></a></div>
</div>
<div style="height: 100%; width: 100%; position: relative;">
<?php include_once "includes/sidebar.php" ?>
<div style="width: 100%; height: 100%; background: var(--light-blue); position: absolute; z-index: 5;">
sidebar.php
<?php
$host = $_SERVER['HTTP_HOST'];
$sidebar_items = array(
"Home" => array("classes" => "fas fa-home", "path" => "/"),
"How to Play" => array("classes" => "fas fa-info-circle", "path" => "/how-to-play"),
"Player Search" => array("classes" => "fas fa-search", "path" => "/player-search"),
"My Roster" => array("classes" => "fas fa-user-friends", "path" => "/my-roster"),
"Submit Feedback" => array("classes" => "fas fa-comment", "path" => "/submit-feedback")
);
function getIconClassFromValue($v) {...}
function transformPath($path) {...}
function getHoverClassFromURI($uri) {...}
?>
<link rel="stylesheet" href="css/sidebar.css">
<div style="position: absolute; height: 100%; z-index: 10;">
<div class="sidebar-wrapper">
<div class="sidebar-contents">
<?php foreach ($sidebar_items as $key => $value) : ?>
<a <?php getHoverClassFromURI($value['path']) ?> href=<?php echo transformPath($value['path']); ?>>
<div>
<div class="sidebar-icon">
<div><i <?php getIconClassFromValue($value['classes']) ?>></i></div>
</div>
<div class="sidebar-text">
<div><?php echo $key ?></div>
</div>
</div>
</a>
<?php endforeach; ?>
</div>
</div>
</div>
player-search.php
<?php include_once "includes/header.php" ?>
<?php
$rows = array("One" => "One",
"Two" => "Two",
"Three" => "Three",
"Four" => "Four",
"Five" => "Five",
"Six" => "Six");
?>
<div class="inner-page-contents">
<div class="player-search">
<div class="player-search-top-section">
<div class="ps-input">
<input type="text" name="player-search" id="player-search" placeholder="Search Player Info..." autofocus>
<i class="fas fa-search"></i>
</div>
<div class="ps-dropdown">
<label for="actions">Actions: </label>
<select name="actions" id="actions-input">
<option selected disabled value="">----- Select Option -----</option>
<option value="Add">Add Player(s) To Team</option>
<option value="Remove">Remove Player(s) From Team</option>
</select>
</div>
<div class="ps-dropdown">
<label for="sort">Sort By: </label>
<select name="sort" id="sort-input">
<option selected disabled value="">----- Select Option -----</option>
<option value="Name_A_Z">Name (A-Z)</option>
<option value="Name_Z_A">Name (Z-A)</option>
<option value="Goals">Goals</option>
<option value="Assists">Assists</option>
<option value="MVPs">MVPs</option>
</select>
</div>
</div>
<div class="player-search-bottom-section">
<div class="table-wrapper">
<table>
<thead>
<tr class="table-header">
<th>Select</th>
<th>Player Name</th>
<th>Goals</th>
<th>Assists</th>
<th>MVPs</th>
</tr>
</thead>
<tbody>
<?php foreach ($rows as $key => $value) : ?>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<?php include_once "includes/footer.php" ?>
footer.php
</div>
</div>
</div>
</body>
</html>
reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
styles.css
:root {
--dark-blue: #042d4a;
--blue: #59819e;
--light-blue: #a1d3f7;
font-family: "Open Sans", sans-serif;
}
* {
box-sizing: border-box;
}
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#500&display=swap");
.top-bar {
width: 100%;
height: 100%;
background: var(--dark-blue);
display: flex;
justify-content: space-between;
}
.inner-page-contents {
height: 100%;
width: 100%;
padding-left: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.player-search {
display: grid;
grid-template-rows: 10% 90%;
height: 100%;
width: 100%;
color: #393e43;
}
.player-search-top-section {
padding: 0 2.5%;
display: flex;
align-items: flex-end;
}
.player-search-top-section input {
height: 30px;
font-family: "Open Sans", sans-serif;
font-size: 1.25em;
}
.player-search-top-section select {
height: 30px;
text-align: center;
}
.ps-input {
width: 40%;
position: relative;
}
.ps-input > i {
position: absolute;
left: 12px;
top: 7px;
}
.ps-dropdown label {
margin: 0 5px 0 10px;
font-size: 1.25em;
font-weight: 600;
}
#player-search {
border-radius: 999px;
border: 2px solid black;
width: 100%;
box-sizing: border-box;
font-size: 1em;
padding-left: 40px;
}
#player-search:focus {
outline: none;
box-shadow: 0 0 10px purple;
}
.player-search-bottom-section {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.table-wrapper {
height: 90%;
width: 95%;
overflow-y: scroll;
overflow-x: hidden;
}
table {
table-layout: fixed;
height: 100%;
width: 100%;
position: relative;
}
tr:not(.table-header) {
width: 100%;
height: 100px;
}
.table-wrapper td {
border: 2px solid #666666;
}
.table-wrapper tr {
background: #cccccc;
}
.table-wrapper tr:nth-child(even) {
background: #eeeeee;
}
.table-header > th {
color: white;
font-weight: 600;
padding: 20px 0;
background: var(--dark-blue);
top: 0;
position: sticky;
}
sidebar.css
.sidebar-wrapper {
width: 100%;
height: 100%;
background: var(--dark-blue);
position: relative;
}
.sidebar-contents {
width: 100%;
height: 100%;
background: inherit;
transition: width 0.4s;
}
.sidebar-wrapper:hover .sidebar-contents {
width: 300px;
transition: width 0.4s;
}
.sidebar-item {
width: 100%;
display: block;
text-decoration: none;
color: white;
font-size: 40px;
}
.sidebar-item.active {
background: var(--blue);
}
.sidebar-item:hover {
background: var(--blue);
}
.sidebar-item > div {
padding: 10px;
display: flex;
}
.sidebar-icon {
width: 50px;
}
.sidebar-icon > div {
display: flex;
align-items: center;
}
.sidebar-text {
font-size: 0px;
margin-left: 0;
transition: font-size 0.4s, margin-left 0.4s;
}
.sidebar-text > div {
display: flex;
align-items: center;
justify-content: flex-end;
height: 100%;
}
.sidebar-wrapper:hover .sidebar-text {
font-size: 24px;
margin-left: 15px;
transition: font-size 0.4s, margin-left 0.4s;
transition-delay: 0.4s;
}
I'm developing a website that has several pages, and to avoid having to write the entire menu I want to use the php include method. However I am not making the menu appear inside the html file. how do I make the menu appear whenever I call include?
<header>
<nav id="navbar">
<div id="navbar-div">
<span id="navbar-spam">
<h1 id="navbar-logo">
<img src="images/logo.png" alt="" srcset="" class="logo1">
</h1>
</span>
<nav id="menu">
<ul>
<li>home</li>
<li>quem somos</li>
<li>destaques</li>
<li>representantes</li>
<li>clientes</li>
<li>contato</li>
</ul>
</nav>
</div>
</nav>
</header>
style.css
*{
margin: 0;
padding: 0;
}
#font-face {
font-family: 'mandina';
src: url('font/Madina.otf')/*Para navegadores Internet Explorer*/;
font-weight: normal;font-style: normal;
}
#font-face {font-family: 'mandina';
src: url('/font/Madina.ttf') /*Para os demais navegadores*/;
font-weight: normal;
font-style: normal;
}
/* INICIO CABEÇALHO */
header {
width: 100%;
height: 4.5em;
}
#navbar-logo {
margin-left: 0.5em;
width: 17vh;
height: 9vh;
}
#navbar{
background-color: white;
position: fixed;
z-index: 10;
height: 4.5rem;
width: 100rem;
}
#navbar-div {
position: absolute;
width: 100%;
}
#navbar-spam {
position: fixed;
width: 15em;
height: 3.5em;
}
#navbar-logo {
position: absolute;
margin-right: 40rem;
margin-top: 0;
width: 50%;
height: 100%;
text-align: center;
}
#menu {
z-index: 9;
position: fixed;
margin-top: 1.5rem;
margin-left: 28rem;
width: 100%;
height: 4.5rem;
font-weight: bold;
text-transform: uppercase;
}
#menu li{
float: left;
list-style: none;
}
#menu li a {
color: black;
text-decoration: none;
padding: 1.4rem;
}
/* INICIO CORPO DO SITE */
main {
position: relative;
height: 200em;
width: 100%;
background-color: white;
color: black;
}
.design-tec {
font-family: mandina;
font-size: 15vh;
margin-left: 30rem;
margin-top: -20rem;
color: black;
text-shadow: 3px 3px 6px #f3c569;
}
.linha-home {
border: 1px dashed black;
margin-left: 39rem;
margin-top: -0.9rem;
width: 16rem;
}
#img-home {
margin-top: 4rem;
margin-left: 5rem;
width: 55vh;
}
.texto-home {
margin-top: 1rem;
margin-left: 33rem;
font-style: italic;
}
#itens-home {
position: absolute;
margin-left: 33rem;
margin-right: 21rem;
margin-top: 3rem;
font-weight: bold;
}
#ico-catalogo,
#ico-representantes,
#ico-tutoriais {
margin-left: 0.5rem;
width: 8vh;
height: 8vh;
}
#ico-representantes{
margin-left: 1.7rem;
}
#div-catalogo{
position: absolute;
margin-left: 1rem;
}
#div-representantes {
position: absolute;
margin-left: 11rem;
}
#div-tutorial {
position: absolute;
margin-left: 23rem;
}
#ico-catalogo:hover,
#ico-representantes:hover,
#ico-tutoriais:hover{
width: 9vh;
height: 9vh;
transition: 1s;
}
#home{
position: relative;
height: 20%;
width: 100%;
background-color: white;
}
/* INICIO RODAPÉ */
footer {
position: fixed;
background-color: blue;
color: black;
}
This is the index.htm file, which will be the main page
<!DOCTYPE html`
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<?php require "navbar.php" ?>
<main>
<section id="home">
<img src="images/img-home.gif" id="img-home">
<h2>
<p class="design-tec">Design & Tecnologia</p>
</h2>
<hr class="linha-home">
<div class="texto-home">
<p>Modernidade e tecnologia em um produto exclusivo para o seu imóvel!</p>
</div>
<div id="itens-home">
<div id="div-catalogo">
<img src="images/catalogo.svg" id="ico-catalogo">
<p id="Pcatalogo">Catálogo</p>
</div>
<div id="div-representantes">
<img src="images/aperto-de-mao.svg" id="ico-representantes">
<p id="Prepresantantes">Representantes</p>
</div>
<div id="div-tutorial">
<img src="images/mail.svg" id="ico-tutoriais">
<p id="Pcontato">Tutoriais</p>
</div>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
Just rename your file index.htm to index.php then at the index.php, you can now use a mixture of php and html code.
To include a file inside an html, you can do this:
index.php
<!DOCTYPE html`
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<?php
require "navbar.php";
//or
// require_once "navbar.php"
?>
You can read more about using php on html here.
Note: After changing your extension to .php, you can't run the file without a server unlike with static files such as html or htm.
To do this, you can install a development server on your development environment such as XAMPP.
References to XAMPP can be found here.
php
and im beginner with with php,html and css
for example i want to change the logo to be in top center but it does not change
i use xampp to run my php file im not sure if i use the right way to link
css to php file
<?php include('server.php'); ?>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600" rel="stylesheet">
<link rel="stylesheet" href="StyleIndex.css">
</head>
<body>
<header class="Logo">
<a href="index.php">
<img alt="logo" src="logo3.jpg" />
</a>
</header>
<nav>
<div>
<i class="fa fa-bars"></i>
</div>
<ul>
<li>Home</li>
<li>Drop 1 <i class="fa fa-sort-desc"></i>
<ul>
<li>m 1</li>
<li>m 2</li>
<li>m 3</li>
<li>m 4</li>
</ul>
</li>
<li>Drop 2 <i class="fa fa-sort-desc"></i>
<ul>
<li>m 1</li>
<li>m 2</li>
<li>m 3</li>
<li>m 4</li>
</ul>
</li>
<li>About</li>
<li>Logout</li>
</ul>
</nav>
<script type="text/javascript">
$("nav div").click(function() {
$("ul").slideToggle();
$("ul ul").css("display", "none");
});
$("ul li").click(function() {
$("ul ul").slideUp();
$(this).find('ul').slideToggle();
});
$(window).resize(function() {
if($(window).width() > 768) {
$("ul").removeAttr('style');
}
});
</script>
<div class="semiProfile">
<div class="avatar">
<img src="avatar.png" />
</div>
<div class="Username">
<?php if (isset($_SESSION['username'])) : ?>
<p class="username"><strong><?php echo $_SESSION['username']; ?></strong></p>
<?php endif ?>
</div>
</div>
<div class="Content">
<div class="news">
<p class="status">
</p>
</div>
<div class="Chat">
<Form class="chatBox">
<input class="statusBar" type="text" placeholder="Write your status ...!" />
<button>Send</button>
</Form>
</div>
</div>
<div class="NewQuestion">
<div class="avatar1">
<img src="avatar.png" />
</div>
<div class="Username">
<?php if (isset($_SESSION['username'])) : ?>
<p class="username1"><strong><?php echo $_SESSION['username']; ?></strong></p>
<?php endif ?>
</div>
<div class="Question">
<p class="question">
This is the area where the new and trending questions are written on the website
</p>
</div>
</div>
<footer class="footer">
Copyrights!
</footer>
</body>
</html>
and i try to style it but there is no affect on it
and here is my css file StyleIndex.css
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0;
padding: 0;
background-color:#161515;
}
.logo img{
position: absolute;
left: 100px;
}
.nav{
position: absolute;
}
.nav .a
{
padding: 20px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
background-color: rgb(34, 33, 33);
position: relative;
}
ul li {
display: inline-block;
}
ul li a {
color: aliceblue;
text-decoration: none;
padding: 15px;
display: block;
}
ul li:hover {
background: lightgrey;
}
ul ul {
position: absolute;
min-width: 200px;
background: lightgrey;
display: none;
}
ul ul li {
display: block;
background: #e3e3e3;
}
ul li:hover ul {
display: block;
}
ul li i {
color: aliceblue;
float: right;
padding-left: 20px;
}
nav div {
background-color: rgb(34, 33, 33);
color: #292929;
font-size: 24px;
padding: 0.6em;
cursor: pointer;
display: none;
}
#media(max-width: 768px) {
nav div {
display: block;
}
ul {
display: none;
position: static;
background-color: rgb(34, 33, 33);
}
ul li {
display: block;
}
ul ul {
position: static;
background-color: rgb(34, 33, 33);
}
}
.semiProfile
{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid black;
background-color: rgb(34, 33, 33);
position:absolute;
}
.avatar img
{
max-width: 80px;
max-height: 80px;
}
.logout
{
margin: 15px 0 0;
color:aliceblue;
font-size: 12px;
}
.username
{
position: absolute;
left: 150px;
top: 60px;
color:aliceblue;
}
.About
{
margin: 15px 0 0;
color: aliceblue;
font-size: 12px;
}
.Logo img
{
max-width: 80px;
max-height: 80px;
}
.footer
{
position: absolute;
left: 200px;
top: 900px;
color: aliceblue;
}
.Contect
{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.news
{
position: relative;
z-index: 1;
background: rgb(34, 33, 33);
max-width: 360px;
margin: 0 auto 20px;
padding: 20px;
text-align: center;
border: 1px solid black;
}
.status
{
margin: 15px 0 0;
color: aliceblue;
font-size: 15px;
}
.Chat
{
position: relative;
z-index: 1;
background: rgb(34, 33, 33);
max-width: 360px;
margin: 0 auto 20px;
padding: 20px;
text-align: center;
border: 1px solid black;
}
.Chat input
{
font-family: "Roboto", sans-serif;
outline: solid;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing:border-box;
font-size: 14px;
}
.Chat button
{
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #000000;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
cursor: pointer;
}
.Chat button:hover, .Chat button:active
{
background: #630645;
}
.username1
{
position: absolute;
top: 10px;
left: 110px;
color: aliceblue;
}
.avatar1 img
{
max-width: 80px;
max-height: 80px;
border-radius: 50%;
top: 10px;
left: 20px;
position:absolute;
}
.NewQuestion
{
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid black;
background-color: rgb(34, 33, 33);
position: absolute;
right: 90px;
top: 135px;
}
.question
{
position: absolute;
top: 50px;
left: 110px;
color: aliceblue;
}
i found the problem , the problem was from xampp im not sure what happened but
i used other program and now it's working
after checking network tab i saw that css file appear after some time and when it appear
it has an old version of it im not sure why but i used PhpStorm and then i make localhost
using PhpStorm and now it's working thank you for people tried to help me :)
I want adjust my div like this,
<------------------header--------------------->
========================================================
tree structure table div
==
== =
== ===========================================
== = graph div = drop down div
==
== =
=
=========================================================
footer
My code is,
<?php
include("Config.php");
if(isset($_POST['submit'])){
if(!empty($_POST['check_list'])) {
echo"<div style=\"width: 100%; height:7%; background-color: green; color: white; id=header;\">";
echo"</div>";
echo"<div style=\"width:20%; height:86%;color: white; background-color:pink;class=page-container;\">";
<---------some codes---------------->
echo"</div>";//tree div ends
echo"<div style=\"width:80%; height:38%; background-color: skyblue; color:white;float:left;\">
right div1";echo"</div>";
echo"<div style=\"width: 20%; height:50%; background-color: lightblue; color:white;float:left;\">
right div2";echo"</div>";
echo"<div style=\"width:300px; height:53%; background-color:orange; color: white; float:left;\">
right div3";echo"</div>";
echo"<div style=\"width: 1600px; height:5%; background-color: green; color: white; float:left; left;\">
footer div";echo"</div>";
}//inside if ends
?>
can any one help me I am struggling a lot to do this.
a simple solution with flex with the use of external CSS as your shouldn't write all the styles as inline.
I used only HTML in order to show the result but i think you can easily echo it wth PHP later.
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
header,
footer {
min-height: 50px;
background: green;
}
.container {
flex: 1;
display: flex;
}
.sidebar {
flex: 1;
background: red;
}
.left {
flex: 2;
background: pink;
display: flex;
flex-direction: column;
}
.top,
.bottom {
flex: 1;
background: blue;
}
.bottom {
display: flex;
}
.bottom>div {
flex: 1;
background: linear-gradient(to right, yellow, black);
}
<header></header>
<div class="container">
<div class="sidebar"></div>
<div class="left">
<div class="top">
</div>
<div class="bottom">
<div></div>
<div></div>
</div>
</div>
</div>
<footer></footer>
Using flexbox you could do it like this. However, I would recommend splitting out the CSS from the PHP file.
<?php
include("Config.php");
if(isset($_POST['submit'])){
if(!empty($_POST['check_list'])) {
echo '<style type="text/css">
body {
margin: 0;
}
.header, .footer {
width: 100%;
height: 3rem;
background: green;
}
.content-wrapper {
height: calc(100vh - 6rem);
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-evenly;
}
.left-col {
width: 20%;
background: pink;
height: 100%;
}
.right-col {
width: 80%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.cell {
background: #ccc;
}
.dark-blue {
width: 100%;
flex-grow: 1;
background: steelblue;
}
.light-blue {
width: 70%;
background: aqua;
}
.orange {
width: 30%;
background: orange;
}
</style>';
echo '<div class="header">Header</div>
<div class="content-wrapper">
<div class="left-col">Pink</div>
<div class="right-col">
<div class="cell dark-blue">Dark blue</div>
<div class="cell light-blue">Light blue</div>
<div class="cell orange">Orange</div>
</div>
</div>
<div class="footer">Footer</div>';
}
}
?>
I am trying to make a drop-down menu using jQuery/JavaScript, but my menu won't show anything.
Here is my code:
JavaScript:
function toggleMenu(target){
if($(target).css("display")=='none'){
$("#drop_down, drop_menu").hide(500);
$(target).toggle(500);
}
header.php
<?php
?>
<div id="header" class="absolute" >
<ul>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_search')">Search</p></li>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_login')">Log in</p></li>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_chart')">My Cart</p></li>
<li class="float_left"><p class="pointer" onclick="toggleMenu('#drop_menu')">Menu</p></li>
</ul>
<div class="clear_both"></div>
<br/>
<div id="drop_down"class="right">
<div id="drop_search" class="hidden">
<p>Search</p>
</div>
<div id="drop_login" class="hidden">
<p>login</p>
</div>
<div id="drop_chart" class="hidden">
<p>cart</p>
</div>
<div id="drop_menu" class="hidden">
<p>menu</p>
</div>
</div>
</div>
sorry for the long css, i just like to pack it into one file
style.css
body{
position: relative;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
body table{
border-collapse: collapse;
width: 100%;
}
body th, body tr, body td{
padding: 0;
}
body h1, body h2,body h3,body h4,body h5,body h6,body p{
margin: 0px;
}
body p{
font-size: 12px;
}
body h6{
font-size: 14px;
}body h5{
font-size: 16px;
}body h4{
font-size: 18px;
}body h3{
font-size: 20px;
}body h2{
font-size: 24px;
}body h1{
font-size: 28px;
}
body ul,body li{
list-style: none;
margin: 0px;
padding: 0px;
}
body img{
border: none;
}
body hr{
margin: 0px;
border: none;
height: 1px;
}
body a:link{
text-decoration: none;
}
body a:visited{}
body a:hover{}
body .relative{
position: relative;
}
body .absolute{
position: absolute;
}
body .fixed{
position: fixed;
}
body .float_left{
float: left;
}
body .float_right{
float: right;
}
body .clear_both{
clear: both;
}
body input, body select, body textarea{
border-radius: 5px;
}
body .input_text{}
body .input_select{
border-radius: 5px;
font-size: 11px;
}
body .input_option{
background-color: #f6f6f6;
color: #333333;
}
body .input_option_inactive{
background-color: #f6f6f6;
color: #888888;
}
body .input_submit{
background: url("../images/submit.png");
border: none;
font-weight: bold;
color: #efefef;
cursor: pointer;
border-radius: 20px;
height: 20px;
}
body .input_submit:hover{
color: #ffffff;
text-shadow: 0 0 3px #efefef;
}
body .input_submit_inactive{
background: url('#');
border:none;
}
body .input_submit_inactive:hover{
color: #333333;
text-shadow: 0 0 3px #434343;
}
body .input_textarea{}
body .top{
vertical-align: top;
}
body .middle{
vertical-align: middle;
}
body .bottom{
vertical-align: bottom;
}
body .left{
text-align: left;
}
body .center{
text-align: center;
}
body .right{
text-align: right;
}
body .spacer{
width: 10px;
height: 10px;
}
body .bold{
font-weight: bold;
}
body .italic{
font-style: italic;
}
body .strip{
text-decoration: line-through;
}
body .hidden{
display: none;
}
body .show{
display: block;
}
body .pointer{
cursor: pointer;
}
body .scroll-y{
overflow-y: scroll;
}
#whole{
width: inherit;
height:100%;
margin-left: auto;
margin-right: auto;
vertical-align: top;
}
.black{color: #000000;}
.white{color: #ffffff;}
.red{color: #ff0000;}
.green{color: #00ff00;}
.blue{color: #0000ff;}
.yellow{color: #ffff00;}
.toska{color: #00ffff;}
.pink{color: #ff00ff;}
header.css
#header{
right: 0;
top: 0;
}
#header li{ height: 20px;
background: #960000;
}
#header li p{
margin: 0 15px;
color: #cccccc;
height: 12px;
line-height: 20px;
font-weight: bold;
}
#header li p:hover{
color: #f6f6f6;
}
#header #drop_down{
background: url('../images/black20.jpg');
}
Can anyone can help ?
Remove your class="hidden" and set default to style="display: none" (or hide on page load).
You have a sintaxe error in your function
Try with this function
function toggleMenu(target){
if($(target).is(":hidden")){
$("#drop_down div").hide(500);
}
$(target).toggle(500);
}
And give me some feedback...
This code might work as per your requirement. I have not changed your code just remove class="hidden" entirely.
Note: You have not mention your css so i assume as per class names defined by you.
Please let me know if i am lagging some where....
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#header {
border:1px solid red;
width:100%;
}
.pointer {
cursor:pointer;
}
.absolute {
position:absolute;
}
.float_left {
float:left;
}
.right {
float:right;
}
.clear_both {
clear:both;
}
</style>
</head>
<body>
<div id="header" class="absolute">
<ul>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_search');">Search</p>
</li>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_login')">Log in</p>
</li>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_chart')">My Cart</p>
</li>
<li class="float_left">
<p class="pointer" onclick="toggleMenu('#drop_menu')">Menu</p>
</li>
</ul>
<div class="clear_both"></div>
<br/>
<div id="drop_down" class="right">
<div id="drop_search">
<p>Search</p>
</div>
<div id="drop_login">
<p>login</p>
</div>
<div id="drop_chart">
<p>cart</p>
</div>
<div id="drop_menu">
<p>menu</p>
</div>
</div>
</div>
<script type="text/javascript">
$("#drop_down div").hide();
function toggleMenu(target)
{
if($(target).css("display") != 'none')
{
$(target).hide(500);
}
else
{
$("#drop_down div").hide(500);
$(target).show(500);
}
}
</script>
</body>
</html>