Имейте содержание, заполняющее следующую колонку таблицы, поскольку меню расширяется - PullRequest
Новая
       12

Имейте содержание, заполняющее следующую колонку таблицы, поскольку меню расширяется

0 голосов
/ 08 января 2020

Я работаю над страницей, где у меня есть меню из 12 проектов. При наведении курсора проект подчеркивается, а при щелчке проект расширяется по вертикали, отображая описание.

Я использовал таблицу для компоновки этого меню. Я sh создаю функцию, в которой меню может расширяться только до определенной точки, прежде чем начнется "заполнение" следующего столбца оставшейся частью меню.

Ниже я приложил макет GIF, показывающий нужную функцию. Я также вставил некоторые из моего кода.

Пожалуйста, прости мое упрощенное описание c, я все еще нахожусь в процессе ознакомления с кодированием.

Mock up

        <script>

            $(document).ready(function(){
              $("#Project1").click(function(){
                $("p.Describtion1").toggle();
              });
            });

        </script>
body {
  font-family: 'Helvetica Neue';
  text-align: center;

  position: absolute;
  width: 100%;
}

#content {
  width: 100%;
  border-spacing: 0;

  margin-top: 200px;

}

#content td span {
  text-overflow: ellipsis;
  overflow : hidden;

  display: block;

  border-left: 7px solid #fff;
  border-right: 7px solid #fff;
  padding: 16px;
  vertical-align: top;
  text-align: left;
  font-size: 45px;

}


#content td {
  vertical-align: top;
  font-size: 45px;

}


#content td:nth-child(odd) {
  width: 30%;
}

#content td:nth-child(even) {
  width: 3%;
}


  #Project1:hover {
    text-decoration: underline;
      cursor: default;
  	}


p {

display: inline-block;
text-align: left;
padding-left:30px;
padding-right:30px;
font-size: 30px;

}
<table id="content">
    <tr>
        <td id="Project1">
                Wer Baut Der Stadt 2019
            <br>
                <p class="Describtion1" style="display:none;">
                Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin. 
                </p>
            <br>
        </td>
        <td>2019</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
...