Menus Style List in PHP

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

* {

padding: 0;

margin: 0;

}

body

{

font: Times New Roman, Times, serif;

color: #;

width: 960px;

margin: 20px auto;

}

{

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;

}

{

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

<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>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>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>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>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

//start your JavaScript function

$(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:

Click on PHP:

Again click on PHP:

Click on AJAX:

Again Click on AJAX: