Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>
Idioma: En

N-Level CSS Menu With PHP And MYSQL

A website should have a good and proper navigation from user point of view to attract more visitors. Creating css navigation using php and mysql is always a headache for php newbies.
In this tutorial  I have told that how to manage a horizontal css navigation menu from a single mysql table and a small piece of PHP code. Instead of wasting your time I come to our main tutorial. Go through the following points and make your own navigation menu. Here we make a totally dynamic menu in php which retrieved data from mysql database.



Step: 1 Database "abc":


First of all we make a database and include one table for menu. so we make "abc" database and 'menu' table in database. and also include three field in menu table. U can see in the below picture.



Step: 2 Table Structure:

Now Insert field name like as a "id" (default as primary key), "m_name", "m_link" , "parent_id".  we can see this table structure in below picture.


Step:3 Database table "menu":

After than we insert some data in this table which we want to display in menu. It also see in below picture.



As you are seeing, the table has only four fields. First column is id of each menu that is primary key and last column is the id of parent of each menu. You’ll understand yourself by seeing the structure.

Step 4 Style Sheet for menu (style.css):

Apply the following css to your menu. and save it name as style.css. and include in head section in index page.

@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0; }
body {     background: none repeat scroll 0 0 conten;
    float: left;
    margin: 0px auto;
    padding: 0px;
    text-align: center;     }
#cssmenu {
  height: 80px;
  padding:0px 100px;  text-align:center;
 border-radius: 5px 5px 0 0;
 -moz-border-radius: 5px 5px 0 0;
 -webkit-border-radius: 5px 5px 0 0;
 background: #5FACEB;
 margin:80px 350px;
}
/* =======  Menu  ====*/
#navigation { float: right; z-index:9999;}
.js .selectnav { display: none; }
.menu ul { margin: 0; padding: 0; list-style: none; }
.menu ul li { position: relative;}
.menu ul ul { position: absolute; display: none; top: 100%; left: 0; z-index: 100; width: 175px; }
.menu > ul li { float: left; cursor: pointer;}
.menu ul li:hover > ul { display: block; }
.menu ul a {display: block;position: relative;}
.menu ul ul li a.sf-with-ul:after{
-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: #FFFFFF;
    -moz-border-top-colors: none;
    border-color: #FFFFFF #FFFFFF #FFFFFF #afafaf;
    border-image: none;
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-style: solid;
    border-width: 5px;
    content: "";
    height: 0;
    margin-top: -5px;
    position: absolute;
    right: .5em;
    top: 50%;
    width: 0;
    margin-right: -3px; }
.menu ul ul li a:hover.sf-with-ul:after{
border-color: #ccc #ccc #ccc #2ecc71;
-moz-border-right-colors:#FBFBFB}
.menu ul ul ul {top: 0;left: 100%;}
.menu ul a { text-decoration: none; }
.menu ul > li > a {
color: #fff;
font-weight: 400;
font-size: 14px;
line-height: 18px;
padding: 35px 18px 31px 18px;
overflow: hidden;
border-bottom: 2px solid transparent;
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;}

#current,
.menu ul li a:hover,
.menu ul > li:hover > a { 
border-bottom: 2px solid #2ecc71;
background-color: #fbfbfb;
color:#2ecc71;}
.menu ul li a:hover .sf-sub-indicator{
color:#2ecc71;}
#current:after {
background: #2ecc71;
bottom: -2.5px;
content: '';
left: 50%;
display: block;
height: 5px;
margin: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
width: 5px;}
.ie8 #current:after { display: none; }
.menu ul li a {
-webkit-transition: border 150ms ease-in-out, background-color 150ms ease-in-out;
-moz-transition: border 150ms ease-in-out, background-color 150ms ease-in-out;
-o-transition: border 150ms ease-in-out, background-color 150ms ease-in-out;
-ms-transition: border 150ms ease-in-out, background-color 150ms ease-in-out;
transition: border 150ms ease-in-out, background-color 150ms ease-in-out;}

/* Drop-Down */
.menu ul ul {
background-color: #fff;
z-index: 999;
border-radius: 0 0 3px 3px;
border: 1px solid #fefefe;
border-top: 2px solid #2ecc71;
margin: -2px 0 0 0;}
.menu > ul ul li:hover > a {
border-bottom: 0;
background:#000;}
.menu ul ul li {
margin: 0;
padding: 0;
width: 100%;}
.menu ul ul li a {
color: #555;
font-size: 13px;
line-height: 18px;
padding: 10px 16px !important;
border: 0; }
.menu ul ul li { border-top: 1px solid #e8e8e8; }
.menu ul ul li:first-child { border: 0; }
.menu ul ul li a:hover {
color:#2ecc71;
background-color: #000;
border: 0; }
.menu ul ul li a {
-webkit-transition: background-color 50ms ease-in-out;
-moz-transition: background-color 50ms ease-in-out;
-o-transition: background-color 50ms ease-in-out;
-ms-transition: background-color 50ms ease-in-out;
transition: background-color 50ms ease-in-out; }
.menu ul ul ul {
border: 1px solid #e0e0e0;
border-radius: 0 3px 3px 3px;
margin: -1px 0 0 0; }
.sf-sub-indicator {
color: #c6c6c6;
margin: 0 0 0 5px;
width: 11px;
display: inline-block;
font-size: 12px;
line-height: 0;}
.menu ul ul .sf-sub-indicator .fa-angle-down { display: none; }
#jPanelMenu-menu #current { border-bottom: 1px solid #eee; }
#jPanelMenu-menu #current:after,
#jPanelMenu-menu .sf-sub-indicator { display: none; }
#jPanelMenu-menu li a {
display:block;
padding: 12px 20px !important;
background-color: #f6f6f6;
border-bottom: 1px solid #f0f0f0;
color: #888;
font-weight: 500;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
font-weight: 500;
outline: none; }
#jPanelMenu-menu li a:hover { background-color: #f8f8f8; }
#jPanelMenu-menu li li a {
background-color: #fff;

padding-left: 30px !important;}

Step 5 index.php:

This is the main PHP file that will fetch the menus from database and show them in your navigation menu using while loop. The script is written for 3 Level CSS menu. You can extend it for nth level by running the loop n times as it is.

<?php
//database connection
$dbname = 'abc';
$link = mysql_connect("localhost","root","") or die("Couldn't make connection.");
$db = mysql_select_db($dbname, $link) or die("Couldn't select database");
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dynamic menu</title>
<link rel="stylesheet" type="text/css" href="styleseet/style.css"  /> 
</head>

<body>
<div id="cssmenu">
<nav id="navigation" class="menu">
<ul id="responsive">
<?php
function query($parent_id) { //function to run a query
   $query = mysql_query ( "SELECT * FROM menu WHERE parent_id=$parent_id" );
   return $query;
}
function has_child($query) { //This function checks if the menus has childs or not
    $rows = mysql_num_rows ( $query );
   if ($rows > 0) {
        return true;
   } else {
       return false;
   }
}
function fetch_menu($query) {
   while ( $result = mysql_fetch_array ( $query ) ) {
       $m_id = $result ['id'];
       $m_name = $result ['m_name'];
      $m_link = $result ['m_link'];
       echo "<li><a href='{$m_link}'><span>{$m_name}</span></a>";
       if (has_child ( query ( $m_id ) )) {
           echo "<ul>";
           fetch_menu ( query ( $m_id ) );
           echo "</ul>";
       }
       echo "</li>";
   }
}
fetch_menu (query(0)); //call this function with 0 parent id
?>
</ul>
</nav>
</div>
</body>
</html>

Ok so finally we make a totally dynamic menu with css. Just by changing the database connection properties and change your menu names and their links in database table. I hope you enjoyed the tutorial.
Keep Visiting :) 

Related Articles



This post first appeared on STAR LINE TECHNOLAB, please read the originial post: here

Share the post

N-Level CSS Menu With PHP And MYSQL

×

Subscribe to Star Line Technolab

Get updates delivered right to your inbox!

Thank you for your subscription

×