Accueil > jquery > menu-jquery

{ Menu jquery }

Introduction

Basé sur jQuery, ce menu est particulièrement appreciable pour son design simple et épuré (permettant ainsi une adaptation des CSS aisée) en plus les propriétés CSS sont clairement désigée et le code est bien commenté ce qui rend la modification du menu très simple.

Placement des fichiers

Décompressez l'archive à la racine du site :

Les fichiers CSS : (à placer dans le dossier 'css' ou alors à fusionner avec votre feuille de style déjà existante).

style.css
ie.css

Les Scripts à placer dans le dossier 'js'

jquery.dropdownPlain
jquery-1.3.1.min

La partie html

<ul class="dropdown">
	<li><a href="#">For Facilities</a>
		<ul class="sub_menu">
			 <li><a href="#">Artificial Turf</a></li>
			 <li>
				<a href="#">Batting Cages</a>
				<ul>
					<li><a href="#">Indoor</a></li>
					<li><a href="#">Outdoor</a></li>
				</ul>
			 </li>
			 <li><a href="#">Benches &amp; Bleachers</a></li>
			 <li><a href="#">Communication Devices</a></li>
			 <li><a href="#">Dugouts</a></li>
			 <li><a href="#">Fencing &amp; Windscreen</a></li>
			 <li><a href="#">Floor Protectors</a></li>
			 <li><a href="#">Foul Poles</a></li>
			 <li><a href="#">Netting</a></li>
			 <li><a href="#">Outdoor Furniture &amp; Storage</a></li>
			 <li><a href="#">Outdoor Signs</a></li>
			 <li><a href="#">Padding</a></li>
			 <li><a href="#">Scoreboards</a></li>
			 <li><a href="#">Shade Structures</a></li>
			 <li><a href="#"> - VIEW ALL - </a></li>
		</ul>
	</li>
	<li><a href="#">Field Maintenance</a>
		<ul class="sub_menu">
			<li><a href="#">All-in-One Team Cart</a></li>
			<li><a href="#">Air &amp; Electrical Reels</a></li>
			 <li><a href="#">Field Drags</a></li>
			 <li>
				<a href="#">Field Marking Equipment</a>
				<ul>
					<li><a href="#">Batter's Box Templates</a></li>
					<li><a href="#">Dryline Markers</a></li>
					<li><a href="#">Field Paint</a></li>
					<li><a href="#">Field Sprayers</a></li>
					<li><a href="#">Stencils</a></li>
				</ul>
			 </li>
			 <li>
				<a href="#">Field Tarps</a>
				<ul>
					<li><a href="#">Area Tarps</a></li>
					<li><a href="#">Growth Covers / Protectors</a></li>
					<li><a href="#">Infield Tarps</a></li>
					<li><a href="#">Tarp Accessories</a></li>
				</ul>
			 </li>
			 <li><a href="#">Hand Tools</a></li>
			 <li>
				<a href="#">Irrigation, Hoses, Nozzles</a>
				<ul>
					<li><a href="#">Hoses &amp; Hose Reels</a></li>
					<li><a href="#">Irrigation</a></li>
					<li><a href="#">Nozzles</a></li>
				</ul>
			 </li>
			 <li><a href="#">Layout &amp; Measurement Tools</a></li>
			 <li><a href="#">Moisture Removal</a></li>
			 <li><a href="#">Mound &amp; Home Plate Fortification</a></li>
			 <li><a href="#">Mowers &amp; Stripers</a></li>
			 <li><a href="#">Soil &amp; Enviornmental Management</a></li>
			 <li><a href="#">Soil Amendments</a></li>
			 <li><a href="#">Spreaders &amp; Sweepers</a></li>
			 <li><a href="#"> - VIEW ALL - </a></li>
		</ul>
	</li>
	<li><a href="#">Game-Practice Equipment</a>
		<ul class="sub_menu">
			 <li>
				<a href="#">Baseball - Softball</a>
				<ul>
					<li><a href="#">Base Accessories</a></li>
					<li><a href="#">Bases &amp; Home Plates</a></li>
					<li><a href="#">Game Accessories</a></li>
					<li><a href="#">Pitching Rubbers</a></li>
				</ul>
			 </li>
			 <li>
				<a href="#">Batting Practice Equipment</a>
				<ul>
					<li><a href="#">Backstops</a></li>
					<li><a href="#">Infield Screens</a></li>
					<li><a href="#">Jugs Pitching Machines</a></li>
					<li><a href="#">Turf Mats</a></li>
					<li><a href="#">Turf Protectors</a></li>
					<li><a href="#">Replacement Accessories</a></li>
				</ul>
			 </li>
			 <li>
				<a href="#">Batting Cages</a>
				<ul>
					<li><a href="#">Indoor</a></li>
					<li><a href="#">Outdoor</a></li>
				</ul>
			 </li>
			 <li>
				<a href="#">Portable Mounds</a>
				<ul>
					<li><a href="#">Batting Practice Mounds</a></li>
					<li><a href="#">Game Mounds</a></li>
					<li><a href="#">Practice Mounds</a></li>
				</ul>
			 </li>
			 <li>
				<a href="#">Football</a>
				<ul>
					<li><a href="#">First Down Markers</a></li>
					<li><a href="#">Football Accessories</a></li>
					<li><a href="#">Football Goalposts</a></li>
				</ul>
			 </li>
			 <li>
				<a href="#">Soccer</a>
				<ul>
					<li><a href="#">Soccer Goals</a></li>
					<li><a href="#">Soccer Accessories</a></li>
				</ul>
			 </li>
			 <li><a href="#"> - VIEW ALL - </a></li>
		</ul>
	</li>
	<li><a href="#">Training &amp; Conditioning</a>
		<ul class="sub_menu">
			 <li><a href="#">Ladders &amp; Sticks</a></li>
			 <li><a href="#">Hurdles</a></li>
			 <li><a href="#">Training Accessories</a></li>
			 <li><a href="#">Smart-Cart Training System</a></li>
			 <li><a href="#">Smart-Hurdle Collection</a></li>
			 <li><a href="#"> - VIEW ALL - </a></li>
		</ul>
	</li>
	<li><a href="#">Books-Videos</a>
		<ul class="sub_menu">
			 <li><a href="#">Field Design &amp; Maintenance</a></li>
			 <li><a href="#">Turf Management</a></li>
			 <li><a href="#">Training</a></li>
			 <li><a href="#"> - VIEW ALL - </a></li>
		</ul>
	</li>
</ul>

Appels des fichiers javascript

Copiez-collez le code ci-dessous entres les balises <head> et </head> de votre page

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>