8.22. Foundation Magellan (Magellan) Navigation

发布时间 ： 2025-10-25 13:33:52 UTC      

Page Views: 9 views

8.22.1. How to create Magellan Navigation

Magellan navigation is a navigation index, which is created as follows:

Example 

 
Page1
  ... 
Page2
  ...

8.22.2. Case analysis

Add on the < div > element data-magellan-expedition="fixed" Property to create Magellan navigation.

And then in

Or
  • Add on data-magellan-arrival="value" Property, followed by a link (page1) that is the same as the property value.

    Use data-magellan-destination="value" Property to control the target of Magellan navigation, followed by the Element addition name="value" Property. The values of both properties must be the same as the data-magellan-arrival The values of the page1 ).

    Finally, initialize the Foundation JS, and the navigation automatically switches according to what is currently displayed when the user scrolls the page.

    8.22.3. Magellan Navigation head Toolbar

    Magellan navigation uses an example of the head toolbar:

    Example 

    <div data-magellan-expedition="fixed"> <nav class="top-bar" data-topbar> ... <section class="top-bar-section"> <ul class="left"> <li data-magellan-arrival="page1"><a href="#page1">Page 1a>li> <li data-magellan-arrival="page2"><a href="#page2">Page 2a>li> ul> section> nav> div> <h3 data-magellan-destination="page1">Page1h3> <a name="page1">a> ... <h3 data-magellan-destination="page2">Page2h3> <a name="page2">a> ...       
     
      8.22.4.  Magellan navigation inner margin  
     
     By default, Magellan navigates   
       The element has the inner margin of 10px. You can remove it using CSS:  
     
     Example  
     
     
     
    [data-magellan-expedition], [data-magellan-expedition-clone]{ padding:0; } 
     
     
      
      
     
      8.22.5.  Magellan navigation options  
     
     Use the data-options property to modify Magellan navigation settings, such as   
      data-magellan-expedition="fixed"   data-options="destination_threshold:60">   :  
             
      
     Name 
         		  
     Types 
         		  
     Default 
         		  
     Description 
         		  
     Example 
         		 
           
      
       active_class   
         		  
       string   
         		  
       active   
         		  
     Specify the class that activates the link 
         		  
      https://www.runoob.com/try/try2.php?filename=tryfoundation_ref_js_magellan_active   _    
      
       threshold   
         		  
       number   
         		  
     0 
         		  
     Specify when the navigation needs to be fixed. Scrolls are calculated based on the scroll bar, which defaults to 0 (auto). 
         		  
      https://www.runoob.com/try/try2.php?filename=tryfoundation_ref_js_magellan_threshold   _    
      
       destination_threshold   
         		  
       number   
         		  
     20 
         		  
     Set this value to set the value at the top of the navigation list when the navigation link is displayed as active (blue background). 
         		  
      https://www.runoob.com/try/try2.php?filename=tryfoundation_ref_js_magellan_destination   _    
      
       fixed_top   
         		  
       number   
         		  
     0 
         		  
     Specifies the pixel value of the navigation bar from the head 
         		  
      https://www.runoob.com/try/try2.php?filename=tryfoundation_ref_js_magellan_fixedtop   _        
                
                
    
                    
    
                        
    
                            
                                文章链接
                            
                            ：
                            8.22. Foundation Magellan (Magellan) Navigation 
                        
    
                    
    
                
    
            
        
        
    
            

    
        
        
    
            
    
                
    
                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        
    
                            
     
     
     
    
                        
    
                    
                
    
                
                
    
            
    
        
    
    
        
        
    
            
    
                
    
                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        
    
                            
     
     
     最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
     
     
    
                        
    
                    
                
    
                
                
    
            
    
        
    
    
        
        
    
            
    
                
    
                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289