The Foundation drop-down menu allows the user to select a value from a predefined drop-down list: 尝试一下 » Using buttons or links id The value needs to match the contents of the drop-down menu (id01). In < div >, < nav > Finally, initialize the Foundation JS. 注意: On the small screen, the width of all drop-down menus is 100%. 使用 注意: On the small screen, the width of all drop-down menus is 100%. Can be used < div > add multimedia elements to the drop-down menu: By default, the drop-down menu is at the bottom, and you can add By default, the drop-down menu is displayed after the button is clicked. If you need to display after the mouse is moved up, you can use it on the button We can add it to the button
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. 8.13.1. Example ¶
Case analysis ¶
.dropdown Class to add a downward arrow symbol icon to the button. data-dropdown="id" Property to open the drop-down menu. Add in
.f-dropdown Class and data-dropdown-content Property to create the contents of the drop-down menu. Drop-down menu size ¶
.tiny , .small , .medium , .large 或 .mega 来修改下拉菜单的宽度。 8.13.2. Example ¶
..
..
..
..
Drop-down menu margin ¶
.content Class to add an inner margin to the drop-down menu 8.13.3. Example ¶
..
..
Other instances ¶
8.13.4. Example ¶
<a href="#" data-dropdown="id01" class="button dropdown">Dropdown
Buttona>
<div id="id01" data-dropdown-content class="f-dropdown medium content">
<h4>Paris Titleh4>
<p>Some text.. some text..p>
<img src="paris.jpg" alt="Paris" width="400" height="300">
<p>Paris, je t'aime.
div>
Drop-down menu direction ¶
data-options="align:left|right|top" To change its orientation: 8.13.5. Example ¶
<a href="#" data-dropdown="id01" data-options="align:right"
class="button dropdown">Righta>
<a href="#" data-dropdown="id02" data-options="align:top" class="button
dropdown">Top
<a href="#" data-dropdown="id03" data-options="align:bottom"
class="button dropdown">Bottoma>
<a href="#" data-dropdown="id04" data-options="align:left" class="button
dropdown">Left
Pull-down menu trigger condition ¶
data-options="is_hover:true" Attributes: 8.13.6. Example ¶
<a href="#" data-dropdown="id01" data-options="is_hover:true"
class="button dropdown">Hover over mea>
<ul id="id01" data-dropdown-content class="f-dropdown">
<li><a href="#">Link 1a>li>
<li><a href="#">Link 2a>li>
<li><a href="#">Link 3a>li>
ul>
Split button ¶
.split Class to set a split effect button, which generates a downward icon button on the < span > element: 8.13.7. Example ¶
Principles, Technologies, and Methods of Geographic Information Systems
102