گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1395/07/28 - 11:33
كد :7239
ایجاد یک منوی شناور مصور شبیه آنچه در سایت های حرفه ای مثل سایت microsoft میبنید هدف آموزش امروز ماست برای ایجاد این منو ما از jquery,ajax,php,my sql کمک گرفته ایم.
ایجاد یک منوی شناور بسیار زیبا و حرفه ای با استفاده از jQuery, Ajax, PHP و MySQL
در این آموزش ما به شما نشان خواهیم داد که چطور یک منوی داینامیک شناور را به کمک jQuery, Ajax, PHP و MySQL اگر از سایت های فروشگاهی دیدن کرده باشید حتما با منو های داینامیک که با کلیک کردن روی آن یک زیر منوی بزرگ با کلی تصویر ضاهر می شود را دیده اید . این دقیقا کاری است که می خواهیم به شما یاد دهیم.
برای ایجاد یک منوی داینامیک تنها سه گام زیر نیاز است.
گام 1. ایجاد یک فایل Php که ما آن رابه صورت زیر ایجاد و به نام menu.php ذخیره کرده ایم .
// Database Structure
CREATE TABLE `menu` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`menu` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=latin1
CREATE TABLE `submenu` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`menu_id` int NOT NULL,
`sub_menu` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=latin1
<html>
<head>
<link href="menu_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function get_submenu(id)
{
$.ajax
({
type:'post',
url:'get_submenu.php',
data:{
get_submenu:"submenu",
menu_id:id
},
success:function(response) {
if(response!="")
{
$("#link"+id+">#submenu_div").html(response);
}
}
});
}
</script>
</head>
<body>
<div id="wrapper">
<div id="menu_div">
<?php
$host="localhost";
$username="root";
$password="";
$databasename="sample";
$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);
$menu = mysql_query("SELECT * FROM menu");
echo "<div id='main_menu'>";
while($row=mysql_fetch_array($menu))
{
?>
<li class='menu_link' id="link<?php echo $row['id'];?>">
<a href='' class="menu_anchor" id="<?php echo $row['id'];?>" onmouseover="get_submenu(this.id);"><?php echo $row['menu'];?></a>
<ul id='submenu_div'></ul>
</li>
<?php
}
echo "</div>";
?>
</div>
</div>
</body>
</html>
در این گام ما دو جدول بانک داده ی 'menu' و 'submenu' برای نگه داری از داده های منو و زیر منو ایجاد کرده ایم . ما یک تگ div ایجاد کرده ایم و منو را از دیتا بیس به نمایش گذاشته ایم . و هنگامی که کاربر منو را لمس می کند (hover) ما تابع get_submenu() را فرا می خوانیم که توسط یک درخواست ajax ایجاد و ایدی منو را به فایل 'get_submenu.php می فرستد. برای اینکه بتوانیم تمام زیر منو های مربود را داشته باشیم سپس آن را در submenu_div به نمایش می گذاریم .
گام 2
ایجاد یک فایل PHP برای دریافت زیر منو . ما فایل را طبق کد های زیر ایجاد و به نام get_submenu.php ذخیره کرده ایم .
<?php
$host="localhost";
$username="root";
$password="";
$databasename="sample";
$connect=mysql_connect($host,$username,$password);
$db=mysql_select_db($databasename);
if(isset($_POST['get_submenu']))
{
$menu_id=$_POST['menu_id'];
$sub_menu = mysql_query("SELECT * FROM submenu where menu_id='$menu_id'");
while($row=mysql_fetch_array($sub_menu))
{
echo "<li><a href=''>".$row['sub_menu']."<br><img src='images/dynamic_menu/".$row['sub_menu'].".jpg'></a></li>";
}
exit();
}
?>
در این گام ما یک ایدی منو را از درخواست آجاکس ajax request گرفته و سپس تمام زیر منو های مربوط به لینک مربوطه را دریافت و آنها را با تصاویرشان به نمایش می گذاریم.
گام 3 .
ایجاد یک فایل CSS که ما آن را طبق کد های زیر ایجاد و به نام menu_style.css ذخیره کرده ایم .
body
{
margin:0 auto;
padding:0px;
text-align:center;
width:100%;
font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
background-color:#BDBDBD;
}
#wrapper
{
margin:0 auto;
padding:0px;
text-align:center;
width:995px;
}
#menu_div
{
float:left;
padding:0px;
width:710px;
height:50px;
line-height:50px;
margin-left:145px;
position:relative;
}
#menu_div #main_menu .menu_link
{
background-color:#2E2E2E;
list-style-type:none;
float:left;
border-left:1px solid #666;
}
#menu_div #main_menu .menu_anchor
{
color:white;
text-decoration:none;
padding:20px;
}
#menu_div #main_menu .menu_link:hover #submenu_div
{
display:block;
}
#menu_div #submenu_div
{
display:none;
background-color:white;
width:600px;
position:absolute;
left:0px;
width:702px;
margin:0px;
padding:0px;
}
#menu_div #submenu_div li
{
display:inline-block;
margin:15px;
}
#menu_div #submenu_div li a
{
color:blue;
text-decoration:none;
}
#menu_div #submenu_div li a img
{
max-height:80px;
}
این پایان کار ما برای ایجاد یک منوی شناور داینامیک با استفاده از jQuery, Ajax, PHP و MySQL بود . مثل همیشه بر حسب نیاز سایت خود تغییرات را در کد ها ایجاد کنید.