I have such a menu page, on which php generates a list that I get from the database. Here is what it looks like this
I just can’t find a simple list style that would fit here, and I also can’t figure out how to make me show only the title, but when I click on it, then the rest of the information will appear. Tell me, please, how this can be done to look good. Thank you in advance!
I tried this, but it's not what I want to get:
body {
font-family: Helvetica;
}
ol {
counter-reset: myCounter;
margin-left: 0;
padding-left: 5px;
color: rgb(100, 100, 100);
display: inline-block;
}
li {
position: relative;
padding-left: 3em;
margin: 0.45em 0;
list-style: none;
line-height: 1.8em;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
li:hover {
color: rgb(0, 0, 0);
}
li:before {
content: counter(myCounter);
counter-increment: myCounter;
position: absolute;
top: 0;
left: 0;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
padding: 0px;
color: #fff;
background: #2980b9;
font-weight: bold;
text-align: center;
border-radius: .9em;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
z-index: 1;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
li:hover:before {
background-color: #2ecc71;
}
li li:before {
background-color: #3498db;
}
li:after {
position: absolute;
top: 2.1em;
left: 0.9em;
width: 2px;
height: calc(100% - 2em);
content: '';
background-color: rgb(203, 203, 203);
z-index: 0;
}
li:hover:after {
background-color: #2ecc71;
}
li li {
font-size: 0.8em;
}
1\2:
<!DOCTYPE html>
<html>
<head>
<title>Films</title>
<link href="css/button.css" rel="stylesheet">
<?php require 'menu.php'; ?>
</head>
<body>
<button type="button"><a href="allFilmsASC.php">Sort by ASC</a></button>
<?php require 'allFilms.php'; ?>
</body>
</html>
2\2:
<link href="css/index.css" rel="stylesheet">
<ul style="margin-top: 100px">
<?php
require 'queries.php';
$query = new Queries();
$films = $query->getAllFilms();
foreach ($films as $film) {
echo "<li style='margin-left: 50px;>Title: {$film['name']}</>";
echo " <ul>
<li>Year: {$film['year']}</li>
<li>Format: {$film['format']}</li>
<li>Actors: {$film['actors']}</li>
</ul>
</li>";
}
?>
</ul>
I want to do something like this:IMAGE
Generated HTML:
<!DOCTYPE html>
<html>
<head>
<title>Films</title>
<link href="css/button.css" rel="stylesheet">
<link href="css/menu.css" rel="stylesheet">
<nav role='navigation' class="menu">
<ul>
<li><a href="index.php">All Films</a></li>
<li><a href="#">Tools</a>
<ul>
<li><a href="addFilm.php">Add Film</a></li>
<li><a href="deleteFilm.php">Delete Film</a></li>
</ul>
</li>
<li><a href="findBy.php">Search</a></li>
<li><a href="">Import Films</a></li>
</ul>
</nav></head>
<body>
<button type="button"><a href="allFilmsASC.php">Sort by ASC</a></button>
<link href="css/index.css" rel="stylesheet">
<ul style="margin-top: 100px">
<li style='margin-left: 50px;>Title: First2</> <ul>
<li>Year: 2223</li>
<li>Format: VHS</li>
<li>Actors: I and other</li>
</ul>
</li><li style='margin-left: 50px;>Title: First2</> <ul>
<li>Year: 2223</li>
<li>Format: VHS</li>
<li>Actors: I and other</li>
</ul>
</li><li style='margin-left: 50px;>Title: Second</> <ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I</li>
</ul>
</li><li style='margin-left: 50px;>Title: Second.0</> <ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.0</li>
</ul>
</li><li style='margin-left: 50px;>Title: Second.1</> <ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.1</li>
</ul>
</li><li style='margin-left: 50px;>Title: Second.2</> <ul>
<li>Year: 2019</li>
<li>Format: DVD</li>
<li>Actors: I.2</li>
</ul>
