https://github.com/dynamicdriverepo/ddsmoothmenu

https://github.com/dynamicdriverepo/ddsmoothmenu

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/dynamicdriverepo/ddsmoothmenu
• Owner: dynamicdriverepo
• Created: 2013-02-26T17:47:42.000Z (almost 12 years ago)
• Default Branch: master
• Last Pushed: 2016-07-01T08:58:21.000Z (over 8 years ago)
• Last Synced: 2023-04-06T14:06:55.609Z (over 1 year ago)
• Language: JavaScript
• Size: 24.4 KB
• Stars: 9
• Watchers: 7
• Forks: 9
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Smooth Navigational Menu #

*Description:* Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek "slide plus fade in" transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation.

## Directions ##

*Step 1:* This script uses the following external files:

+ jQuery 1.4 or above (served via Google CDN)

+ ddsmoothmenu.js

+ ddsmoothmenu.css

+ ddsmoothmenu-v.css

+ 4 images

*Step 2:* Add the below code to the HEAD section of your page:

	

	

	

	

	

	

	

	

	/***********************************************

	* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

	* Please keep this notice intact

	* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

	***********************************************/

	

	

	

	

	

	ddsmoothmenu.init({

		mainmenuid: "smoothmenu1", //menu DIV id

		orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"

		classname: 'ddsmoothmenu', //class added to menu's outer DIV

		//customtheme: ["#1c5a80", "#18374a"],

		contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]

	})

	

	ddsmoothmenu.init({

		mainmenuid: "smoothmenu2", //Menu DIV id

		orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"

		classname: 'ddsmoothmenu-v', //class added to menu's outer DIV

		method: 'toggle', // set to 'hover' (default) or 'toggle'

		arrowswap: true, // enable rollover effect on menu arrow images?

		//customtheme: ["#804000", "#482400"],

		contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]

	})

	

	

*Step 3:* Then, add the below sample markup to your page:

	

	

	

	

	

	
Example 1

	

	


	


	
Item 1

	


Folder 0

	  


	  
Sub Item 1.1

	  
Sub Item 1.2

	  
Sub Item 1.3

	  
Sub Item 1.4

	  
Sub Item 1.2

	  
Sub Item 1.3

	  
Sub Item 1.4

	  

	

	


Folder 1

	  


	  
Sub Item 1.1

	  
Sub Item 1.2

	  
Sub Item 1.3

	  
Sub Item 1.4

	  
Sub Item 1.2

	  
Sub Item 1.3

	  
Sub Item 1.4

	  

	

	
Item 3

	


Folder 2

	  


	  
Sub Item 2.1

	  


Folder 2.1

	    


	    
Sub Item 2.1.1

	    
Sub Item 2.1.2

	    


Folder 3.1.1

			


	    		
Sub Item 3.1.1.1

	    		
Sub Item 3.1.1.2

	    		
Sub Item 3.1.1.3

	    		
Sub Item 3.1.1.4

	    		
Sub Item 3.1.1.5

			

	    

	    
Sub Item 2.1.4

	    

	  

	  

	

	
Item 4

	

	


	

	

	

	
Example 2

	

	


	


	
Item 1

	


Folder 0

	  


	  
Sub Item 1.1

	  
Sub Item 1.2

	  
Sub Item 1.3

	  
Sub Item 1.4

	  
Sub Item 1.2

	  
Sub Item 1.3

	  
Sub Item 1.4

	  

	

	


Folder 1

	  


	  
Sub Item 1.1

	  
Sub Item 1.2

	  
Sub Item 1.3

	  
Sub Item 1.4

	  
Sub Item 1.2

	  
Sub Item 1.3

	  
Sub Item 1.4

	  

	

	
Item 3

	


Folder 2

	  


	  
Sub Item 2.1

	  


Folder 2.1

	    


	    
Sub Item 2.1.1

	    
Sub Item 2.1.2

	    


Folder 3.1.1

			


	    		
Sub Item 3.1.1.1

	    		
Sub Item 3.1.1.2

	    		
Sub Item 3.1.1.3

	    		
Sub Item 3.1.1.4

	    		
Sub Item 3.1.1.5

			

	    

	    
Sub Item 2.1.4

	    

	  

	  

	

	
Item 4

	

	


	


## Smooth Navigational Menu set up ##

See script project page for additional details on setup and documentation: