Click here to Skip to main content
14,427,367 members
Rate this:
Please Sign up or sign in to vote.
Please forgive my simplistic description, I am still in the process of familiarizing myself with coding.

I am working on a page where I currently have a menu of 12 projects. On hover a project is underlined and on click a project expands vertically displaying a description.

I have used a table to layout this menu. I wish to create a function where the menu is only able to expand untill a certain point, before it begin "filling up" the next column with the remainder of the menu.

I have also pasted in some of my code.

What I have tried:

<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>
Posted
Updated 13-Jan-20 8:15am
Comments
Richard Deeming 9-Jan-20 13:53pm
   
A table is definitely the wrong approach.

The right approach will depend on your precise requirements. It will probably involve either multi-column layout, flexbox layout, or grid layout.

CSS Multi-column Layout - CSS: Cascading Style Sheets | MDN[^]
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN[^]
CSS Grid Layout - CSS: Cascading Style Sheets | MDN[^]

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

A strategy (from someone who also uses tables with no regrets.


- You need to consider how many rows you wish to allow before changing columns.
- Detect the number of rows you need to display in your menu.
- If the threshold is exceeded then you take advantage of built-in conditionals in your code that will add a second column to your table (before the </tr>)
- now fill in the two-column menu with your data: decide if the second column will take the "next" menu entry or calculate the offset into your array and add the 'new' menu entries to the second column.

In the first method of populating the second column the height of the menu will shrink when you put in the second column. In the second method you can control the height as you wish and the second column will fill "after" first column.

I use a similar technique, although only a single column, for a "left side" menu of buttons. As the number approaches a full column's worth I reduce the font size and they continue to fit. Very few users, aside from developers and Sr. Management, get to see this effect.


   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100