VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >

  • HTML5 教程之Foundation 麦哲伦（Magellan）导航

如何创建麦哲伦导航

麦哲伦导航就是一个导航索引，创建方式如下:

实例


	
    
		
  1. 
			<div data-magellan-expedition="fixed">
    2. 
		
  2. 
			  <dl class="sub-nav">
    3. 
		
  3. 
			    <dd data-magellan-arrival="page1"><a href="#page1">Page 1</a></dd>
    4. 
		
  4. 
			    <dd data-magellan-arrival="page2"><a href="#page2">Page 2</a></dd>
    5. 
		
  5. 
			  </dl>
    6. 
		
  6. 
			</div>
    7. 
		
  7. 
			 
    8. 
		
  8. 
			<h3 data-magellan-destination="page1">Page1</h3>
    9. 
		
  9. 
			<a name="page1"></a>
    10. 
		
  10. 
			...
    11. 
		
  11. 
			 
    12. 
		
  12. 
			<h3 data-magellan-destination="page2">Page2</h3>
    13. 
		
  13. 
			<a name="page2"></a>
    14. 
		
  14. 
			...
    15. 
		
  15. 
			 
    16. 
		
  16. 
			<!-- Initialize Foundation JS -->
    17. 
		
  17. 
			<script>
    18. 
		
  18. 
			$(document).ready(function() {
    19. 
		
  19. 
			    $(document).foundation();
    20. 
		
  20. 
			})
    21. 
		
  21. 
			</script>
    22. 
	

	

		复制

	实例预览 »



	实例解析



	在 <div> 元素上添加 data-magellan-expedition="fixed" 属性来创建麦哲伦导航。



	然后在 <dd> 或 <li> 上添加  data-magellan-arrival="value" 属性，后面添加一个与该属性值一样的链接(page1)。



	使用 data-magellan-destination="value" 属性来控制麦哲伦导航的目标, 后面紧跟的 <a> 元素添加 name="value" 属性。两个属性的值必须与 data-magellan-arrival 的值一致 (page1)。



	最后，初始化 Foundation JS ，用户在滚动页面时导航就会根据当前显示的内容自动切换。



	麦哲伦导航头部工具条



	麦哲伦导航使用头部工具条实例：



	

		实例

	

	
    
		
  1. 
			<div data-magellan-expedition="fixed">
    2. 
		
  2. 
			  <nav class="top-bar" data-topbar>
    3. 
		
  3. 
			    ...
    4. 
		
  4. 
			 
    5. 
		
  5. 
			    <section class="top-bar-section">
    6. 
		
  6. 
			      <ul class="left">
    7. 
		
  7. 
			        <li data-magellan-arrival="page1"><a href="#page1">Page 1</a></li>
    8. 
		
  8. 
			        <li data-magellan-arrival="page2"><a href="#page2">Page 2</a></li>
    9. 
		
  9. 
			      </ul>
    10. 
		
  10. 
			    </section>
    11. 
		
  11. 
			 
    12. 
		
  12. 
			  </nav>
    13. 
		
  13. 
			</div>
    14. 
		
  14. 
			 
    15. 
		
  15. 
			<h3 data-magellan-destination="page1">Page1</h3>
    16. 
		
  16. 
			<a name="page1"></a>
    17. 
		
  17. 
			...
    18. 
		
  18. 
			 
    19. 
		
  19. 
			<h3 data-magellan-destination="page2">Page2</h3>
    20. 
		
  20. 
			<a name="page2"></a>
    21. 
		
  21. 
			...
    22. 
	

	

		复制

	实例预览 »



	麦哲伦导航内边距



	默认情况下，麦哲伦导航的 <div> 元素有 10px 的内边距。可以使用 CSS 移除它：



	

		实例

	

	
    
		
  1. 
			[data-magellan-expedition], [data-magellan-expedition-clone] {
    2. 
		
  2. 
			    padding: 0;
    3. 
		
  3. 
			}
    4. 
	

	

		复制

	实例预览 »



	麦哲伦导航选项



	使用 data-options 属性修改麦哲伦导航的设置, 例如 <div data-magellan-expedition="fixed" data-options="destination_threshold:60">:



	
		

			
				名称
			
				类型
			
				默认
			
				描述
			
				实例
		

		

			
				active_class
			
				string
			
				active
			
				指定激活链接的类
			
				实例预览
		

		

			
				threshold
			
				number
			
				0
			
				指定导航在什么时候需要固定位置。会根据滚动条滚动计算，默认为 0 (auto)。
			
				实例预览
		

		

			
				destination_threshold
			
				number
			
				20
			
				设该值设定了导航链接显示为激活（蓝色背景）时导航列表距离顶部的值。
			
				实例预览
		

		

			
				fixed_top
			
				number
			
				0
			
				指定了导航条距离头部的像素值
			
				实例预览
		

	





      



  

  
  

   
    
    
   

  

  
 
 

 
 
  
 
 
 
 






 






相关教程