Introduction
This article explains Menus Style Lists in PHP. For creating this Menus Style List I will use simple CSS and a JavaScript function. This style list basically works using a JavaScript function and CSS is used for the menu design. You will see the following code below for the Menus Style List.
Example
<html>
<head>
//start your css here
<style type="text/css">
* {
padding: 0;
margin: 0;
}
body
{
font: Times New Roman, Times, serif;
color: #;
width: 960px;
margin: 20px auto;
}
#a
{
width: 400px;
border: 1px solid #FAB2C1;
}
#a li
{
list-style-type: none;
border-bottom: 1px solid #FAB2C1;
}
#a li.odd
{
font-size: 90%;
padding: 2px 8px;
}
#a a
{
display: block;
width: 484px;
color:#6A0000;
text-decoration: none;
padding: 2px 8px;
}
#a li.even
{
background-color:#93D0AD;
}
#a li.odd
{
background-color:#F4F5D6;
display: none;
}
#a li.last
{
border-bottom: none;
}
p
{
padding-bottom: 20px;
}
</style>
// End your css here
<title>Styling List</title>
</head>
<body>
<h3><p>Click on the list item to see informational and click again to view the whole list.</p></h3>
start your menu part
<ul id="a">
<li><a href="#">PHP</a></li>
<li>PHP stands for PHP: Hypertext Preprocessor
PHP is a open source scripting language and free to download and use
PHP is a widely-used, open source scripting language
PHP scripts are executed on the server
</li>
<li><a href="#">HTML</a></li>
<li>HTML stands for Hyper Text Markup Language
HTML is a markup language
A markup language is a set of markup tags
The tags describe document content
HTML documents contain HTML tags and plain text
HTML documents are also called web pages
</li>
<li><a href="#">CSS</a></li>
<li>CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files
</li>
<li><a href="#">JAVASSRIPT</a></li>
<li>A scripting language is a lightweight programming language.
JavaScript is programming code that can be inserted into HTML pages.
JavaScript inserted into HTML pages, can be executed by all modern web browsers.
JavaScript is easy to learn.
</li>
<li><a href="#">jQuery</a></li>
<li>jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish,
and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.<br>
<b>The jQuery library contains the following features:</b>
HTML/DOM manipulation,CSS manipulation,HTML event methods,
Effects and animations,AJAX,Utilities<br>
<b>Tip:</b> In addition, jQuery has plugins for almost any task out there.
<b>Why jQuery?</b><br>
There are a lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.
Many of the biggest companies on the Web use jQuery, such as:
Google,Microsoft,IBM,Netflix
</li>
<li><a href="#">AJAX</a></li>
<li>AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging
small amounts of data with the server behind the scenes. This means
that it is possible to update parts of a web page, without reloading the whole page.
</li>
<li><a href="#">XML</a></li>
<li>XML stands for EXtensible Markup Language
XML is a markup language much like HTML
XML was designed to carry data, not to display data
XML tags are not predefined. You must define your own tags
XML is designed to be self-descriptive
</li>
<li><a href="#">JSONS</a></li>
<li>JSON stands for JavaScript Object Notation
JSON is lightweight text-data interchange format
JSON is language independent *
JSON is "self-describing" and easy to understand
</li>
</ul>
//end your menu part
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
//start your JavaScript function
<script type="text/JavaScript">
$(function () {
$('#a li:even').addClass('even');
$('#a li:odd').addClass('odd');
$('#a li:even:last').addClass('last');
$('#a li:even').click(function () {
$('#a li:even').toggle(500);
$(this).toggle(500);
$(this).next().slideToggle();
});
});
</script>
</body>
</html>
Output
When you will click on any menu then all menus are toggled and shows the information related to your menu and when you click on the same menu again then you will return to the all menus list. Such as:
![list.jpg]()
Click on PHP:
![list2.jpg]()
Again click on PHP:
![list1.jpg]()
Click on AJAX:
![list3.jpg]()
Again Click on AJAX:
![list4.jpg]()