Style list with css only without js and other

Question

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>

you need to show some code and what you've tried. also 'simple list style' doesn't say much — Velimir Tchatchevsky, Nov 21 '18 at 20:43
@VelimirTchatchevsky i have tried some css (update question) — John Rapid, Nov 21 '18 at 20:50
so is your css not working in some way you expected or do you just not like how your design looks? — Velimir Tchatchevsky, Nov 21 '18 at 20:52
Please explain a bit better what you want to achieve. Also if you added the HTML for the list it would be great. — BluePrint, Nov 21 '18 at 20:53

score 0 · Answer 1 · answered Nov 21 '18 at 20:54

0

You cannot have show and hide functions without Javascript.

Javascript tells your browser what to do. CSS is for styling only.

To achieve what you want, you will need to combine the two.

Here is an example: https://stackoverflow.com/a/35409945/2286743

answered Nov 21 '18 at 20:54

Marius

1,420
1
11
19

Davide Candita · Answer 2 · 2018-11-22T00:06:34.877

You can do this using a href link that contains # followed by the id of the element you want to expand

<li class="movie" id="movie6"><a href="#movie6" class="title">Title: Second.2</a>
    <ul>
        <li>Year: 2019</li>
        <li>Format: DVD</li>
        <li>Actors: I.2</li>
    </ul>
</li>

in conjunction with the :target CSS pseudo-class

.movie:target {
  height: 6em;
}

.movie-list {
  list-style: none;
  padding: 0;
}

.movie {
  height: 1em;
  overflow: hidden;
  margin-bottom: 8px;
  transition: height 0.5s;
}

.title {
  font-weight: bold;
  cursor: pointer;
  color: black;
  text-decoration: none;
}

li {
  line-height: 1.5em;
}

.movie:target {
  height: 6em;
}

li ul {
  padding: 8px;
}

<ul class="movie-list">
  <li class="movie" id="movie1"><a href="#movie1" class="title">Title: First2</a>
    <ul>
      <li>Year: 2223</li>
      <li>Format: VHS</li>
      <li>Actors: I and other</li>
    </ul>
  </li>
  <li class="movie" id="movie2"><a href="#movie2" class="title">Title: First2</a>
    <ul>
      <li>Year: 2223</li>
      <li>Format: VHS</li>
      <li>Actors: I and other</li>
    </ul>
  </li>
  <li class="movie" id="movie3"><a href="#movie3" class="title">Title: Second</a>
    <ul>
      <li>Year: 2019</li>
      <li>Format: DVD</li>
      <li>Actors: I</li>
    </ul>
  </li>
  <li class="movie" id="movie4"><a href="#movie4" class="title">Title: Second.0</a>
    <ul>
      <li>Year: 2019</li>
      <li>Format: DVD</li>
      <li>Actors: I.0</li>
    </ul>
  </li>
  <li class="movie" id="movie5"><a href="#movie5" class="title">Title: Second.1</a>
    <ul>
      <li>Year: 2019</li>
      <li>Format: DVD</li>
      <li>Actors: I.1</li>
    </ul>
  </li>
  <li class="movie" id="movie6"><a href="#movie6" class="title">Title: Second.2</a>
    <ul>
      <li>Year: 2019</li>
      <li>Format: DVD</li>
      <li>Actors: I.2</li>
    </ul>
  </li>
</ul>

However, the generated HTML code you posted is not valid. There is the style property that does not have the closing quote and there is a closing tag with no name and that does not close any tags.

score 0 · Accepted Answer · answered Nov 21 '18 at 22:31

you have multiple error, it better first to learn validating your HTML on https://validator.w3.org/nu/

and here example for clickable pure CSS collapsible tree menu, you need to create <label for="cXX"> and <input type="checkbox" id="cXX"> and set cXX with same value for each item.

ul,li{padding:0}
#menutree li{list-style:none}
#menutree > li{margin-left:5px;color:#8a2be2;font-weight:700;position:relative}
#menutree>li:before{content:"+";padding-right:5px}
#menutree>li>ul>li{margin-left:20px;color:green;font-weight:400}
#menutree>li>ul>li:before{content:"-";padding-right:5px}
li .menu_label + input[type="checkbox"]{position:absolute;left:0;opacity:0;cursor:pointer;top:0}
li .menu_label{cursor:pointer}
li .menu_label+input[type=checkbox]+ul>li{display:none}
li .menu_label+input[type=checkbox]:checked+ul>li{display:block}

<ul id="menutree">
  <li>
    <label class="menu_label" for="c1">Title: First2</label>
    <input type="checkbox" id="c1" />
    <ul>
      <li>Year: 2223</li>
      <li>Format: VHS</li>
      <li>Actors: I and other</li>
    </ul>
  </li>
  <li>
    <label class="menu_label" for="c2">Title: Second</label>
    <input type="checkbox" id="c2" />
    <ul>
      <li>Year: 2019</li>
      <li>Format: DVD</li>
      <li>Actors: I</li>
    </ul>
  </li>
  <li>
    <label class="menu_label" for="c3">Title: Second.0</label>
    <input type="checkbox" id="c3" />
    <ul>
      <li>Year: 2019</li>
      <li>Format: DVD</li>
      <li>Actors: I.0</li>
    </ul>
  </li>
</ul>

Style list with css only without js and other

3 Answers3