CSS Design Elements for Structuring

Navigation Options

Within a page there may be additional navigation options.

Navigation within a Page

Please note that all content on a page must belong together in terms of content. A page-internal navigation only makes sense if a lot of content is to be subdivided without having to introduce new menu structures for this. If there are differences in content between the pages, it is advisable to use new menu items (left side).

Tabs

Two components are required to create tabs. Firstly, the tab structure as a list with the two CSS classes nav and nav-tabs. Secondly, the actual content inside a div element, grouped with the CSS class tab-content. The individual areas within a tab are nested within an div element.

Compared to the Bootstrap standard, the round corners are omitted for this element. The link colour represents the faculty or facility colour.

Notes

Despite the visual division, the design consists of one single page. Please note that a printout of the page contains the contents of all tabs. Therefore, please add additional headings to the individual tab pages, as the tab labels will not appear on a printout.

Course Content

Below is the content…

Admission Requirements

…

Course Schedule

…

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#content">Course Content</a></li>
  <li><a data-toggle="tab" href="#requirements">Admission Requirements</a></li>
  <li><a data-toggle="tab" href="#schedule">Course Schedule</a></li>
</ul>

<div class="tab-content">
<div class="active tab-pane" id="content">
<h2>Course Content</h2>
Below is the content&hellip;</div>

<div class="tab-pane" id="requirements">
<h2>Admission Requirements</h2>
&hellip;</div>

<div class="tab-pane" id="schedule">
<h2>Course Schedule</h2>
&hellip;</div>
</div>

Pager

A typical application example for the use of pagers is the display of an archive. Posts from the past can be sorted by date and displayed on sub-pages.

<ul class="pagination">
  <li><a href="#nav-1"><span class="tucicon-nav-left"></span></a></li>
  <li><a href="#nav1">1</a></li>
  <li class="active"><a href="#nav2">2</a></li>
  <li><a href="#nav3">3</a></li>
  <li><a href="#nav4">4</a></li>
  <li><a href="#nav5">5</a></li>
  <li><a href="#nav+1"><span class="tucicon-nav-right"></span></a></li>
</ul>

Table of Content

If a page is quite long and comprises several sections, a table of content (link list) can be used to refer directly to the sections. This is an ordinary list, but it shows navigation arrows as symbols.

Content 1
Content 2
Content 3

Content 1

Text

Content 2

Text

Content 3

Text

<ol class="toc">
  <li><a href="#inhalt1">Content 1</a></li>
  <li><a href="#inhalt2">Content 2</a></li>
  <li><a href="#inhalt3">Content 3</a></li>
</ol>

<h4 id="content1">Content 1</h4>
<p>Text</p>

<h4 id="content2">Content 2</h4>
<p>Text</p>

<h4 id="content3">Content 3</h4>
<p>Text</p>

Accordion

Page content can be collapsed in order to compress it. The advantage of this technique is that very long description texts are only displayed when needed, while otherwise only the heading is visible. This is often used for FAQ pages.

The expanding and collapse of the content is implemented via JavaScript and CSS. In order to hide the content of tucbox-collapse-body by default, add the additional class collapsed. If the content of tucbox-collapse-body should be shown by default, add the additional class collapse in .

We have adapted the CSS styles provided by Bootstrap to that effect that users who do not use JavaScript always see the content of tucbox-collapse-body expanded.

How many elements should the left menu have?

In the first level 7±2. In the second level there is no requirement; however, we recommend a minimum of two and a maximum of 14.

What does "HTML" and "CSS" stand for?

HTML is the abbreviation of "Hypertext Markup Language". This is a markup language for net-like linked texts. (Hypertexts).

Why is my question not answered here?

Most likely because it has not yet been asked.

<div id="accordion-example">
 <div class="tucbox-collapse">
  <div class="tucbox-collapse-heading">
   <p><a class="collapsed" data-toggle="collapse" href="#collapse01">How many elements should the left menu have?</a></p>
  </div>
  <div class="tucbox-collapse-body collapse" id="collapse01">
   <p>In the first level 7&plusmn;2. In the second level there is no requirement; however, we recommend a minimum of two and a maximum of 14.</p>
  </div>
 </div>

 <div class="tucbox-collapse">
  <div class="tucbox-collapse-heading">
   <p><a class="collapsed" data-toggle="collapse" href="#collapse02">What does "HTML" and "CSS" stand for?</a></p>
  </div>
  <div class="tucbox-collapse-body collapse" id="collapse02">
   <p>HTML is the abbreviation of "Hypertext Markup Language". This is a markup language for net-like linked texts. (Hypertexts).</p>
  </div>
 </div>

 <div class="tucbox-collapse">
  <div class="tucbox-collapse-heading">
   <p><a class="collapsed" data-toggle="collapse" href="#collapse03">Why is my question not answered here?</a></p>
  </div>
  <div class="tucbox-collapse-body collapse" id="collapse03">
   <p>Most likely because it has not yet been asked.</p>
  </div>
 </div>
</div>

Notes

Should you instruct several accordions on one web page, please make sure to use unique IDs, e. g.:

<div id="accordion01">…</div>
<div id="accordion02">…</div>
etc.

Pop-ups

You can also display additional information in a newly opening pop-up element, which then covers other page content. Only one such element can be open at a time.

See description "Using pop-up and slideshow effects".