Smooth Navigational Menu

Smooth Navigational Menu (v1.51)

Updated: Dec 17th, 10" (v1.5): Updated menu shadow to use CSS3 box shadows when the browser is FF3.5+, IE9+, Opera9.5+, or Safari3+/Chrome. Only .js file changed.

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.

Some noteworthy features- You can specify a delay before the sub menus appear and disappear when the mouse rolls over and out of them, respectively. The sub menus reposition themselves if too close to the window's right edges. And last but not least, the depth of the accompanying shadow can be customized, or removed altogether. Smooth we say!

Step 1: Insert the following code into the <head> section of your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

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

* This notice MUST stay intact for legal use

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

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

</script>

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

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

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

})

</script>

The above code references a few external files, which by default you should upload to the same directory as the page itself (right click each file and select "Save As"):

Step 2: Add the below menu code to the BODY section of your page. It contains the markup for 1 horizontal menu and 1 vertical menu:

<h2>Example 1</h2>

<ul>

<li><a href="#">Folder 0</a>

<ul>

</ul>

</li>

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

<ul>

</ul>

</li>

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

<ul>

<li><a href="#">Folder 2.1</a>

<ul>

<li><a href="#">Folder 3.1.1</a>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

<h2 style="margin-top:200px">Example 2</h2>

<ul>

<li><a href="#">Folder 0</a>

<ul>

</ul>

</li>

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

<ul>

</ul>

</li>

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

<ul>

<li><a href="#">Folder 2.1</a>

<ul>

<li><a href="#">Folder 3.1.1</a>

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

Each menu should consist of an outer DIV and a valid UL list contained inside it.

If you wish the menu content to reside in an external file on your server and dynamically added to your page(s), read the section "Putting the Menu contents in an external file" below.

Well, that's it for installation.

ddsmoothmenu.init() and Menu content structure

Setting up a Smooth Navigational Menu on your page involves calling ddsmoothmenu.init() inside the HEAD section of your page:

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"]
})

where "smoothmenu1" corresponds to the menu content's outermost DIV on the page. Here's a description of each option:

Attribute	Description
mainmenuid	The ID of the menu's outermost DIV. If the menu contents are fetched via Ajax, then this ID should correspond to the outermost DIV that's within the external file.
orientation	Sets the orientation of the menu. Enter the value "h" or "v" for a horizontal or vertical menu, respectively. Note that the "classname" setting below must also be set according to the "orientation" setting.
classname	Sets the CSS class name that gets applied to the outermost DIV of the menu, effectively styling it. Based on the "orientation" setting above, you want to enter the CSS class that correctly styles the menu By default, "ddsmoothmenu" creates a horizontal menu bar, while "ddsmoothmenu-v" creates a vertical one. Take a look inside ddsmoothmenu.css andddsmoothmenu-v.css.
customtheme	In general, customizing the menu's style and background colors is done by editing the two CSS files of the script. However, you can also modify the menu's background and hover background color- on a per page or per menu basis easily, by taking advantage of the "customtheme" setting. To do so, uncomment (remove the // prefix) from this setting and declare two CSS background values, one for the default state, the other, when the mouse rolls over the menu items: customtheme: ["#1c5a80", "#18374a"], //override default menu CSS background values? Uncomment: ["normal_background", "hover_background"] This property is useful for quickly testing out color combinations without having to edit "ddsmoothmenu.css" each time.
contentsource	Enter "markup" if your menu contents are directly inline on the page, or["container_id", "path_to_menu_file"] For more info on the later option, see "Putting the Menu contents in an external file and fetched using Ajax" below.

Automate Git Commands Across Repos Using Batch Scripts

Writing Scripts to Apply Commands Across Repositories I store all of my local repositories in a particular directory. I wrote these scripts to automate one or more git commands to run on each repository within that directory. It could also be used to do a general clean-up before committing anything to your repository. Here are two ways to do it. Method 1: Use this when you want to store commands in a single file to be executed in sequence for every repo in your directory. 1 @echo off 2 3 for /d %%i in (%cd%\*) do ( 4 echo ************************************************************************* 5 6 echo "%%i" 7 cd "%%i" 8 9 echo ----------------------------------------- 10 echo status 11 git status 12 echo ----------------------------------------- 13 14 echo ************************************************************************* 15 ) 16 17 cd .. 18 The script is simple: It’s composed of a single for loop. W...

ASP Source Code

Search This Blog

Smooth Navigational Menu

Labels

Comments

Post a Comment

Popular posts from this blog

PNR Status by web Scraping Method (ASP.NET) C#

SonarQube Configuration For .NET Core Web API

Automate Git Commands Across Repos Using Batch Scripts