32,000+ SUBSCRIBERS CAN'T GO WRONG !!!

phpans
GET TOP ARTICLES, SNIPPETS, SCRIPTS IN YOUR INBOX FOR FREE!

Delivered by GET EMAIL UPDATES FeedBurner
We always respect your privacy and take protecting it seriously.
We won't Spam You

Dynamic Multi-Color Menu

, 0,
Dynamic Multi-Color Menu
Nowadays Multi-Color Menu is most popular to web designer and developers. High profile website's and some top selling WordPress themes are using the Multi-Color menu. Today we are going to see about Dynamic Multi-Color Menu. We are going to create Multi-Color Menu dynamically using PHP and MySQL. If you don't know about Multi-Color menu before Let's know about it first,

What is Multi-Color Menu?


Multi-Color Menu is a CSS menu with a different color in each link on the menu. You can set up colors, link name by using MySQL and PHP. This menu will show a different color in every category.
Multi-Color Menu Example
We will use MySQL PHP and a dynamic CSS to make this menu.

How To Create Multi-Color Menu?


For create dynamic menu we need to create a Database table first, Select your database and insert this table into your database,

CREATE TABLE IF NOT EXISTS `menu` (
`id` int(50) NOT NULL AUTO_INCREMENT,
`name` varchar(255) COLLATE utf8_unicode_ci NOT NULL DEFAULT '',
`position` int(50) NOT NULL DEFAULT '0',
`slug` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`color` varchar(7) COLLATE utf8_unicode_ci NOT NULL DEFAULT '#000000',
`icon` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `name` (`name`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;

we have created a table name as
menu
now we need insert some values for this table, let's insert them.
Multi-Color Menu MySQL
INSERT INTO `menu` (`id`, `name`, `position`, `slug`, `color`, `icon`) VALUES
(1, 'Home', 1, '', '#0A91F0', '<span class="glyphicon glyphicon-home"></span>'),
(2, 'Image', 2, 'category/image', '#EB5745', '<span class="glyphicon glyphicon-picture"></span>'),
(3, 'Audio', 3, 'category/audio', '#EF8D24', '<span class="glyphicon glyphicon-music"></span>'),
(4, 'Video', 4, 'category/video', '#666699', '<span class="glyphicon glyphicon-facetime-video"></span>'),
(5, 'Application', 5, 'category/application', '#2C5773', '<span class="glyphicon glyphicon-phone"></span>'),
(6, 'Blog', 6, 'category/blog', '#3CBC8D', '<span class="glyphicon glyphicon-book"></span>');

You can change these values and add differents categories for your website. Here name act as category name that means menu subject name, position for links position. Here Home's position is 1 that means home will display in left of all links. Image position is 2, Image will display right behind Home and all name mentain a serial by position. slug as category link , color as color codes which will display different colors for every link and icon for icons. If you don't want to use that you can leave this field empty.

after creating this table we need to display it. Now we create a file and connect this database which has used to save menu table. Create a PHP file name as db.config.php and write down this code,
<?php
$database_name = 'test';
$database_host = 'localhost';
$database_user = 'root';
$database_password = '';
$conn = mysqli_connect($database_host,$database_user,$database_password,$database_name);
?>

this is our database connection file. we used test database to insert menu table. You can change database connection informations as like you want.
Now we create a function.php file for add some functions in this file.
functions.php
<?php
function clean($string) {
$string = strtolower( preg_replace('@[\W_]+@', '-', $string) );
return $string; // Removes special chars.
}

?>

After completing this we need to create a Dynamic CSS File in PHP. Create a styles.php file and write down this code into this file.
styles.php
<?php
header("Content-type: text/css; charset=UTF-8");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
require_once('db.config.php');
include('functions.php');
if(!$conn)die('Database Connection Error! <br/>'.mysqli_connect_error());
$sql = "SELECT * FROM menu ORDER BY position";
$query = mysqli_query($conn,$sql);
while($fcat=mysqli_fetch_assoc($query))
{

echo "
.".clean($fcat['name']).":hover
{
border-bottom: 2px solid ".$fcat['color'].";
-webkit-transition: border-bottom .25s ease .1s;
-moz-transition: border-bottom .25s ease .1s;
-o-transition: border-bottom .25s ease .1s;
-ms-transition: border-bottom .25s ease .1s;
transition: border-bottom .25s ease .1s;
}
.".clean($fcat['name'])."
{
margin: 5px;
}

@media only screen and (min-width: 768px) {
.".clean($fcat['name']).":hover
{
border-bottom: 5px solid ".$fcat['color'].";
}
}
.".clean($fcat['name'])." a
{
color: ".$fcat['color'].";
text-decoration: none;
}

.".clean($fcat['name'])."-menu
{
background: ".$fcat['color'].";
}


.".clean($fcat['name'])."-menu ul
{
padding: 5px 5px;
}


.".clean($fcat['name'])."-menu li
{
list-style: none;
display: inline-block;
padding: 10px 20px;
}

.".clean($fcat['name'])."-menu li:hover
{
opacity: 0.8;
}

.".clean($fcat['name'])."-menu a
{
color: #fff;
text-decoration: none;
}

";
}

echo "#main{height:auto;display:block;background-color:#FFF;border-top:1px solid #E3E6E8;border-bottom:1px solid #E3E6E8}
.navigation{display:block}
.navigation li:hover a{text-decoration:none}
.navigation ul{text-align:center;display:block}
.navigation li,.navigation li a{font-size:13px;display:inline-block}
.navigation li{position:static;color:#FFF;-webkit-transition:border-bottom .25s ease .1s;-moz-transition:border-bottom .25s ease .1s;-o-transition:border-bottom .25s ease .1s;-ms-transition:border-bottom .25s ease .1s;transition:border-bottom .25s ease .1s;border-bottom:2px solid transparent}.navigation li a{padding:3px;outline:0}@media only screen and (min-width:768px){.navigation li{position:relative;font-size:17px;border-bottom:5px solid transparent}.navigation li a{padding:10px 15px;font-size:17px;font-weight:400}}.navigation li:hover ul.dropdown{display:block}.navigation li ul.dropdown{position:absolute;display:none;width:200px;background:#00695b;box-shadow:0 2px 5px 0 rgba(0,0,0,.26);padding-top:0}.navigation li ul.dropdown li{display:block;list-style-type:none}.navigation li ul.dropdown li a{padding:10px;font-size:15px;color:#fff;display:block;border-bottom:1px solid #005c4d;font-weight:400}.navigation li ul.dropdown li:last-child a{border-bottom:none}.navigation li:first-child:hover a{border-radius:3px 0 0 3px}.navigation li ul.dropdown li:hover a{background:#56b5ae}}";
mysqli_close($conn);
?>

This css file display colors dynamicly from database menu table and execute to index.php file. Now create an index.php file and put down this code into this file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dynamic Multi-Color Menu - PHPAns</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Multi-Color Menu">
<meta name="keywords" content="multi color menu css,multi color menu wordpress,dynamic multi color menu, multi color menu mysql-php, PHP multi color menu, mysql multi color menu, multi color menu, free multi color menu, multicolor dynamic menus,Multi-Color Menu"/>
<meta name="author" content="phpans.com">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles.php">
</head>
<body>
<?php
require_once('db.config.php');
include('functions.php');
if(!$conn)die('Database Connection Error! <br/>'.mysqli_connect_error());

echo '<div id="main">';
echo '<nav>';
echo '<div class="navigation">';
echo '<ul>';

$sql = "SELECT * FROM menu ORDER BY position";
$query = mysqli_query($conn,$sql);
if(mysqli_num_rows($query)>0)
{
while($fcat=mysqli_fetch_assoc($query))
{
if ($fcat['slug']=='')
{
echo '<li class="'.clean($fcat['name']).'"><a href="/'.$fcat['slug'].'">'.$fcat['icon'].' '.$fcat['name'].'</a></li>';
}
else
{
echo '<li class="'.clean($fcat['name']).'"><a href="/'.$fcat['slug'].'/">'.$fcat['icon'].' '.$fcat['name'].'</a></li>';
}
}
}
echo '</ul>';
echo '</div>';
echo '</nav>';

echo '</div>';
mysqli_close($conn);
?>
<h1 class="text-center">Dynamic Multi-Color Menu</h1>
</body>
</html>

This file will execute menu informations from database and will display into our browser. we used Bootstrap CSS and Font Awesome Icons for use icons.

If you will run all files correctly then this will display Multi-Color Menu.

Multi-Color Menu Result


If you want to use this modern menu on your website don't late start using the smart Dynamic Multi-Color Menu now. I hope this article will help you to make a smart responsive menu for your website. If you have any question or comment about this Multi-Color Menu article please don't hesitate to do that, please comment your question in comment section.

Download PDF
Signup & Get $25 Free
Is this article helpful for you?





captcha

  • Connect
  •       
Top
Create an free account and start learning & sharing! Sign Up