8.20.1. Sidebar navigation ¶
Foundation usage Links that have been clicked can be found at We can use the grid design pattern to set the side navigation bar. An example is as follows:
In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress. class="side-nav"> Create a sidebar:
Example ¶
<ul class="side-nav">
<li><a href="#">Link 1a>li>
<li><a href="#">Link 2a>li>
<li><a href="#">Link 3a>li>
<li><a href="#">Link 4a>li>
ul>
8.20.2. Activate links and split lines ¶
Use on the .active Class to identify, using the .divider Class to add a horizontal split line: Example ¶
<ul class="side-nav">
<li class="active"><a class="a" href="#">Link 1a>li>
<li><a class="a" href="#">Link 2a>li>
<li class="divider">li>
<li><a class="a" href="#">Link 3a>li>
<li><a class="a" href="#">Link 4a>li>
ul>
8.20.3. Sidebar in the grid ¶
Example ¶
<div class="row">
<div class="medium-4 columns" style="background-color:#f1f1f1;">
<ul class="side-nav">
<li class="active"><a href="#">Homea>li>
<li><a href="#">Learn HTMLa>li>
...
ul>
div>
<div class="medium-8 columns">
<h1>Side Navh1>
<p>Some text..p>
...
div>
div>
Principles, Technologies, and Methods of Geographic Information Systems
102