Open In App

Foundation CSS Sticky Navigation Dropdown Menu

Last Updated : 30 Jun, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source front-end framework that is used to build an attractive responsive website, email, or app quickly and easily. In September 2011, ZURB published it. It is used by many companies, including Facebook, eBay, Mozilla, Adobe, and even Disney. The Bootstrap framework serves as the foundation for this platform, which mimics SaaS. It is more complex, adaptable, and unique. Because of its command-line interface, working with module bundlers is likewise a breeze. Email framework generates HTML emails that are mobile-friendly and readable on all devices. You may create fully responsive web applications using Foundation for Apps.

A drop-down menu is used to show the menu as an enlarged menu with certain items. To arrange our items, we can make a horizontal and vertical dropdown menu. The menu is created using a horizontal drop-down menu, and the sub-menus are automatically oriented vertically. In this article, we will see how we can use the sticky navigation on a drop-down menu. For applying sticky navigation to a dropdown menu we need to add the sticky navigation attributes to the dropdown menu. 

Foundation CSS Sticky Navigation Dropdown Menu used classes:

  • menu: This class is used to create a basic menu with a list of items. This class is used inside <ul> element. The menu created is of horizontal type by default. 
  • dropdown: This class is used to transform a basic menu into an expandable dropdown menu.

Foundation CSS Sticky Navigation used attributes:

  • [data-sticky-container]: This attribute is added to the container which is transformed into the sticky container. This attribute doesn’t take any value.
  • [data-sticky]: This attribute is added to the container which is transformed into the sticky element. This attribute doesn’t take any value.

Syntax:

<div data-sticky-container>
    <ul class="dropdown menu" data-sticky data-dropdown-menu> 
          <li><a href="#">....</a></li>
          ....
    </ul>
</div>

Example 1: The code below demonstrates a basic dropdown menu transformed into sticky navigation.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
      
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
  
<body>
    <div data-sticky-container >
        <div data-sticky>
            <ul class="dropdown menu"
                data-dropdown-menu style=
           "background-color: lightgrey; margin-top: 0;">
                <li>
                    <a href="#">GFG 1</a>
                    <ul class="menu">
                        <li><a href="#">Item 1</a></li>
                        <li><a href="#">Item 2</a></li>
                        <li><a href="#">Item 3</a></li>
                        <li><a href="#">Item 4</a></li>
                    </ul>
                </li>
                <li><a href="#">GFG 2</a>
                    <ul class="menu">
                        <li><a href="#">item a</a>
                            <ul class="menu">
                                <li><a href="#">item a1</a></li>
                                <li><a href="#">item a2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">item b</a></li>
                    </ul>
                </li>
                <li><a href="#">GFG 3</a></li>
            </ul>
        </div>
    </div>
    <div class='column row'
        id='root'>
        <h1 class="text-center"
            style="color:green;">
            GeeksforGeeks
        </h1>
        <h3 class="text-center">
            Foundation CSS Sticky Navigation Dropdown Menu
        </h3>
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
  
        <p class="margin-3">
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line. Welcome to GFG.
            This is an example line.
            Hi Geeks!! Welcome to GeeksForGeeks.
            This is an example line.
        </p>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html> 






                        










Output:


 


Example 2: The below code demonstrates a vertical dropdown menu that is sticky.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


    <!-- Compressed CSS -->


    <link rel="stylesheet" href= 


"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> 


      


    <!-- Compressed JavaScript -->


    <script src= 


"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 


    </script> 


    <script src= 


"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 


    </script> 


</head> 


  


<body> 


    <div data-sticky-container> 


        <div data-sticky> 


            <ul class="vertical dropdown menu"


                data-dropdown-menu  


  style="max-width:250px; background-color: lightgray"> 


                <li> 


                    <a href="#">GFG 1</a> 


                    <ul class="vertical menu nested"> 


                        <li><a href="#">Item 1</a></li> 


                        <li><a href="#">Item 2</a></li> 


                        <li><a href="#">Item 3</a></li> 


                        <li><a href="#">Item 4</a></li> 


                    </ul> 


                </li> 


                <li><a href="#">GFG 2</a> 


                    <ul class="vertical menu nested"> 


                        <li><a href="#">item a</a> 


                            <ul class="vertical menu nested"> 


                                <li><a href="#">item a1</a></li> 


                                <li><a href="#">item a2</a></li> 


                            </ul> 


                        </li> 


                        <li><a href="#">item b</a></li> 


                    </ul> 


                </li> 


                <li><a href="#">GFG 3</a></li> 


            </ul> 


        </div> 


    </div> 


    <div class='column row'


        id='root'> 


        <h1 class="text-center"


            style="color:green;"> 


            GeeksforGeeks 


        </h1> 


        <h3 class="text-center"> 


            Foundation CSS Sticky Navigation Dropdown Menu 


        </h3> 


        <p class="margin-3"> 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. 


        </p> 


  


        <p class="margin-3"> 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. 


        </p> 


  


        <p class="margin-3"> 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. 


        </p> 


  


        <p class="margin-3"> 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. 


        </p> 


  


        <p class="margin-3"> 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. 


        </p> 


  


        <p class="margin-3"> 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. Welcome to GFG. 


            This is an example line. 


            Hi Geeks!! Welcome to GeeksForGeeks. 


            This is an example line. 


        </p> 


    </div> 


    <script> 


        $(document).foundation(); 


    </script> 


</body> 


</html> 



















                        







                        










Output:


 


Reference: https://get.foundation/sites/docs/dropdown-menu.html#sticky-navigation


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Foundation CSS Menu Simple Style
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        React Suite Checkbox Group (Controlled)
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Foundation CSS Menu Sticky Navigation
            

        
    
        
            

                Foundation CSS Sticky Navigation
            

        
    
        
            

                Foundation CSS Top Bar Sticky Navigation
            

        
    
        
            

                Foundation CSS Responsive Navigation Menu
            

        
    
        
            

                Foundation CSS Dropdown Menu JavaScript Reference
            

        
    
        
            

                Foundation CSS Dropdown Menu
            

        
    
        
            

                Foundation CSS Vertical Dropdown Menu
            

        
    
        
            

                Foundation CSS Kitchen Sink Dropdown Menu
            

        
    
        
            

                Foundation CSS Horizontal Dropdown Menu
            

        
    
        
            

                Foundation CSS Dropdown Menu Sass Reference
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
P

        

            
        

        

                                    


                                    

                                        priyanshuchatterjee01                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox