Tạo menu giống trang vnexpress.net

hocmau20 viết 13:39 ngày 10/10/2018

Cái menu đó chẳng hề hấn gì đến PHP cả, chỉ là HTML. Có một cách thực hiện là:

- Trang index.php vẽ menu chính

vd có 3 menu chính:

- Phần Cứng [link đến pc.php]
- Hệ Điều Hành [link đến hdh.php]
- Ngôn Ngữ Lập Trình [link đến nnlt.php]

Khi click vào menu Phần Cứng sẽ link đến pc.php.

Pc.php sẽ vẽ lại menu chính, nhưng thêm các mục con của mục phần cứng vào nữa:

- Phần Cứng [link đến pc.php]
+ Main Board [link đến ...]
+ CPU
+ Ram
- Hệ Điều Hành [link đến hdh.php]
- Ngôn Ngữ Lập Trình [link đến nnlt.php]

Tương tự như vậy cho các menu khác. Thêm thắt màu mè, kiểu dáng vào cho nó dễ biết cái nào menu mẹ cái nào menu con là đươc rồi.

Bác nào có cách hay hơn post lẹ đi (^|^)

tvc_computer viết 13:27 ngày 10/10/2018

Cám ơn bạn nhiều lắm

Nhưng ý mình không phải thế đâu, vì mình truy vấn từ cơ sở dữ liệu và liệt kê nó theo dạng category và subcategory, mình biết có 1 cách là dùng session nhưng mình ko biết phải dùng như thế nào ?

Đại khái là khi click vào menu chính thi gia trị session đó sẽ được tạo ra cho menu chính và các submenu bên trong nó, chính vì thế mà các sub menu sẽ ko bị mất đi.

Cho đến khi mình click và menu chính khác thì session của menu đó sẽ bị xóa đi và sẽ tạo một session mới của menu mình vừa click.

Khổ nổi mình ko biết cách dùng nó như thế nào, mong các bạn chỉ cho mình với

Cảm ơn các bạn nhiều lắm

ttbidouille viết 13:38 ngày 10/10/2018

sứ dụng javascript đi , có trên net

Đownloađ
http://www.vovisoft.com/menu.js
http://www.vovisoft.com/context.js
= ================================
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nouvelle page 1</title>
</head>
<script language="JavaScript" src="menu.js"></script>
<script language="JavaScript" src="context.js"></script>

<body>
<script language="JavaScript">showToolbar();</script>
</body>
</html>

thay đổi menu trong Context.js

ttbidouille viết 13:40 ngày 10/10/2018

mình lọn rồi thôi để xem có ai cần kg ???

xacuop viết 13:37 ngày 10/10/2018

Được gửi bởi tvc_computer

Cám ơn bạn nhiều lắm

Nhưng ý mình không phải thế đâu, vì mình truy vấn từ cơ sở dữ liệu và liệt kê nó theo dạng category và subcategory, mình biết có 1 cách là dùng session nhưng mình ko biết phải dùng như thế nào ?

Đại khái là khi click vào menu chính thi gia trị session đó sẽ được tạo ra cho menu chính và các submenu bên trong nó, chính vì thế mà các sub menu sẽ ko bị mất đi.

Cho đến khi mình click và menu chính khác thì session của menu đó sẽ bị xóa đi và sẽ tạo một session mới của menu mình vừa click.

Khổ nổi mình ko biết cách dùng nó như thế nào, mong các bạn chỉ cho mình với

Cảm ơn các bạn nhiều lắm

Vậy là bạn muốn hỏi cách tạo menu hay là cách dùng session đây?

Cách dùng session:
<?php session_start(); ?> # bỏ dòng này lên đầu trang PHP
<?php
$menuIndex=2;
session_register("menuIndex"); # Dùng session_register để khởi tạo biến session
$_SESSION['menuIndex']; # Dùng $_SESSION['tênbiến'] để lấy giá trị biến session
?>

php_programmer viết 13:38 ngày 10/10/2018

Chào các bạn,
Vấn đề tạo menu giống vnexpress tôi cũng khá quan tâm, tôi cũng muốn viết nhưng không biết bắt đầu từ đâu. Giống như tvc_computer đã hỏi là mình có 2 table cha và con, và lúc tạo menu sẽ truy suất từ 2 menu này để tạo ra menu động.
Các bạn nhớ giúp dùm mình nhé.

Cảm ơn.

ttbidouille viết 13:40 ngày 10/10/2018

xem thu nhe
cua minh do

Code:

<html>

<head>
<title>VietNam</title>
<LINK href="styles/styles.css" type=text/css rel=stylesheet>
<SCRIPT language=JavaScript>

<!--

var lastopen="";

function relban() {
if (parent.frames.rmiddle) {parent.frames.rmiddle.location.reload(true);}
}

function expand(trid) {
elementid='trc'+trid;
otherelement='trx'+trid;
subelements='trs'+trid;
document.all(elementid).style.display='none';
document.all(otherelement).style.display='';
document.all(subelements).style.display='';
}
function collapse(trid) {
elementid='trc'+trid;
otherelement='trx'+trid;
subelements='trs'+trid;
document.all(elementid).style.display='';
document.all(otherelement).style.display='none';
document.all(subelements).style.display='none';
}
//-->
</SCRIPT>
<base target="P1">
</head>

<BODY class=bodyMenu bgColor=#ffffff background=../images/floral_light.jpg>
<!-- Menu Main -->
<P><NOBR><img border="0" src="../images/logo4.gif" width="110" height="37"></P>
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR id=trc1 style="DISPLAY: none">
<TD class=clsMenuTableHeaderCell width=125 height=15>
<P align=center><SPAN class=link id=spana9 style="CURSOR: hand" 
onclick="lastopen='ab9';expand('1');">C***259;n b***7843;n H***7879;</SPAN></P>
</TD>
</TR>
<TR id=trx1>
<TD class=clsMenuTableHeaderCell width=125>
<P align=center><SPAN class=link id=spanb9 style="CURSOR: hand" 
onclick="lastopen='ab9';collapse('1');">C***259;n b***7843;n H***7879;</SPAN></P>
</TD>
</TR>
</TBODY>
</TABLE>
<!-- Sous Menu Main -->
<TABLE cellSpacing=0 width=125 border=0>
<TBODY>
<TR id=trs1>
<TD class=clsMenuTableBodyCell width=125>
<P align=center></NOBR><NOBR>
<FONT color=#000000><A class=melink href="canban.htm" target=PVN>C***259;n B***7843;n</A><BR></FONT>
<FONT color=#000000><A class=melink href="tcpip.htm" target=PVN>TCP/IP</A><BR></FONT>
<FONT color=#000000><A class=melink href="cosonhiphan.htm" target=PVN>C***417; s***7889; nh***7883; phân</A><BR></FONT>
<FONT color=#000000><A class=melink href="cainhieuhe.htm" target=PVN>Cài nhi***7873;u h***7879;</A><BR></FONT>

</TD>
</TR>
</TBODY>
</TABLE>
<!-- Fin Menu Main -->
<!-- ****************************************************************** -->
<!-- Menu 2 --> 
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR id=trc2>
<TD class=clsMenuTableHeaderCell borderColor=#000000 width=125 height=15>
<P align=center><SPAN class=link id=spanax style="CURSOR: hand" 
onclick="lastopen='abx';expand('2');">H***7879; Win2003</SPAN></P>
</TD>
</TR>
<TR id=trx2 style="DISPLAY: none">
<TD class=clsMenuTableHeaderCell width=125>
<P align=center><SPAN class=link id=spanbx style="CURSOR: hand" 
onclick="lastopen='abx';collapse('2');">H***7879; Win2003</SPAN></P>
</TD>
</TR>
</TBODY>
</TABLE>
<!-- Sous Menu 2 -->
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=125 border=0>
<TBODY>
<TR id=trs2 style="DISPLAY: none">
<TD class=clsMenuTableBodyCell width=125>
<P align=center><NOBR>
<FONT color=#000000><A class=melink href="ctrlpanelramenu.htm" target=PVN>CtrlPannel ra Menu</A><BR></FONT>
<FONT color=#000000><A class=melink href="windows2003.htm" target=PVN>Cài Win2003</A><BR></FONT>
<FONT color=#000000><A class=melink href="disable_ctrl.htm" target=PVN>Disable Ctrl Alt Del</A><BR></FONT>
<FONT color=#000000><A class=melink href="disable_shutdown_tracker.htm" target=PVN>Không Shutdown</A><BR></FONT>
<FONT color=#000000><A class=melink href="change_security_level_w2k3.htm" target=PVN>B***7843;o m***7853;t IE </A><BR></FONT>
</FONT>
</NOBR> </P>
</TD>
</TR>
</TBODY>
</TABLE>
<!-- Fin Menu 2 -->
<!-- ****************************************************************** -->
<!-- Menu 3 --> 
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR id=trc3>
<TD class=clsMenuTableHeaderCell borderColor=#000000 width=125 height=15>
<P align=center><SPAN class=link id=spanax style="CURSOR: hand" 
onclick="lastopen='abx';expand('3');">H***7879; Win2000</SPAN></P>
</TD>
</TR>
<TR id=trx3 style="DISPLAY: none">
<TD class=clsMenuTableHeaderCell width=125>
<P align=center><SPAN class=link id=spanbx style="CURSOR: hand" 
onclick="lastopen='abx';collapse('3');">H***7879; Win2000</SPAN></P>
</TD>
</TR>
</TBODY>
</TABLE>
<!-- Sous Menu 3 -->
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=125 border=0>
<TBODY>
<TR id=trs3 style="DISPLAY: none">
<TD class=clsMenuTableBodyCell width=125>
<P align=center><NOBR>
<FONT color=#000000><A class=melink href="cai_w2k_pro.htm" target=PVN>Cài Win2000 Pro</A><BR></FONT>
</FONT>
</NOBR> </P>
</TD>
</TR>
</TBODY>
</TABLE>
<!-- Fin Menu 3 -->
<!-- ****************************************************************** -->
<!-- Menu 4 --> 
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR id=trc4>
<TD class=clsMenuTableHeaderCell borderColor=#000000 width=125 height=15>
<P align=center><SPAN class=link id=spanax style="CURSOR: hand" 
onclick="lastopen='abx';expand('4');">Linux</SPAN></P>
</TD>
</TR>
<TR id=trx4 style="DISPLAY: none">
<TD class=clsMenuTableHeaderCell width=125>
<P align=center><SPAN class=link id=spanbx style="CURSOR: hand" 
onclick="lastopen='abx';collapse('4');">Linux</SPAN></P>
</TD>
</TR>
</TBODY>
</TABLE>
<!-- Sous Menu 4 -->
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=125 border=0>
<TBODY>
<TR id=trs4 style="DISPLAY: none">
<TD class=clsMenuTableBodyCell width=125>
<P align=center><NOBR>
<FONT color=#000000><A class=melink href="linux.htm" target=PVN>C***417; b***7843;n v***7873; Linux</A><BR></FONT>
<FONT color=#000000><A class=melink href="cailinux.htm" target=PVN>Cài ***273;***7863;t Linux</A><BR></FONT>
<FONT color=#000000><A class=melink href="lenhcoban.htm" target=PVN>L***7879;nh c***417; b***7843;n Linux</A><BR></FONT>
<FONT color=#000000><A class=melink href="unicoce_vietnamien_sous_linux.htm" target=PVN>Cài Unicode X11</A><BR></FONT>
<FONT color=#000000><A class=melink href="cobancronlinux.htm" target=PVN>C***417; b***7843;n Cron Linux</A><BR></FONT>
<FONT color=#000000><A class=melink href="cobanlinux.htm" target=PVN>C***417; b***7843;n H***7879; Linux</A><BR></FONT>

</FONT>
</NOBR> </P>
</TD>
</TR>
</TBODY>
</TABLE>
<!-- Fin Menu 4 -->
<!-- ****************************************************************** -->
<!-- Menu 5 --> 
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR id=trc5>
<TD class=clsMenuTableHeaderCell borderColor=#000000 width=125 height=15>
<P align=center><SPAN class=link id=spanax style="CURSOR: hand" 
onclick="lastopen='abx';expand('5');">Sql Server</SPAN></P>
</TD>
</TR>
<TR id=trx5 style="DISPLAY: none">
<TD class=clsMenuTableHeaderCell width=125>
<P align=center><SPAN class=link id=spanbx style="CURSOR: hand" 
onclick="lastopen='abx';collapse('5');">Sql Server</SPAN></P>
</TD>
</TR>
</TBODY>
</TABLE>
<!-- Sous Menu 5 -->
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=125 border=0>
<TBODY>
<TR id=trs5 style="DISPLAY: none">
<TD class=clsMenuTableBodyCell width=125>
<P align=center><NOBR>
<FONT color=#000000><A class=melink href="../sqlserver/bai_1.htm" target=PVN>Bài 1</A><BR></FONT>
<FONT color=#000000><A class=melink href="../sqlserver/bai_2.htm" target=PVN>Bài 2</A><BR></FONT>
<FONT color=#000000><A class=melink href="../sqlserver/bai_3.htm" target=PVN>Bài 3</A><BR></FONT>
<FONT color=#000000><A class=melink href="../sqlserver/bai_4.htm" target=PVN>Bài 4</A><BR></FONT>
<FONT color=#000000><A class=melink href="../sqlserver/bai_5.htm" target=PVN>Bài 5</A><BR></FONT>
<FONT color=#000000><A class=melink href="../sqlserver/bai_6.htm" target=PVN>Bài 6</A><BR></FONT>
<FONT color=#000000><A class=melink href="../sqlserver/bai_7.htm" target=PVN>Bài 7</A><BR></FONT>
</FONT>
</NOBR> </P>
</TD>
</TR>
</TBODY>
</TABLE>
<!-- Fin Menu 5 -->
<!-- ****************************************************************** -->
<!-- Menu 6 --> 
<TABLE borderColor=#000000 cellSpacing=0 cellPadding=0 border=1>
<TBODY>
<TR id=trc6>
<TD class=clsMenuTableHeaderCell borderColor=#000000 width=125 height=15>
<P align=center><SPAN class=link id=spanax style="CURSOR: hand" 
onclick="lastopen='abx';expand('6');">H***7879; WinXp</SPAN></P>
</TD>
</TR>
<TR id=trx6 style="DISPLAY: none">
<TD class=clsMenuTableHeaderCell width=125>
<P align=center><SPAN class=link id=spanbx style="CURSOR: hand" 
onclick="lastopen='abx';collapse('6');">H***7879; WinXp</SPAN></P>
</TD>
</TR>
</TBODY>
</TABLE>
<!-- Sous Menu 3 -->
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=125 border=0>
<TBODY>
<TR id=trs6 style="DISPLAY: none">
<TD class=clsMenuTableBodyCell width=125>
<P align=center><NOBR>
<FONT color=#000000><A class=melink href="caidatwinxp.htm" target=PVN>Cài WinXp</A><BR></FONT>
</FONT>
</NOBR> </P>
</TD>
</TR>
</TBODY>
</TABLE>
<!-- Fin Menu 3 -->
<!-- ****************************************************************** -->




</body>

</html>

HardSoftVN viết 13:27 ngày 10/10/2018

chào các bạn !
ttbidouille viết cũng khá tốt, tuy nhiên chưa giống menu vnexpress.net lam, vi khi minh chọn 1 chuyên mục khác thì tất cả các chuyên mục con phải mất đi chứ ! Theo mình thì bạn tvc_computer nên tham khảo script tạo menu dạng cây (tree), script dạng này có rất nhiều ở các trang free javascript, hình thức giống hoàn toàn menu của vnexpress. Neu bạn không tìm ra xin vui lòng mail cho tôi ở địa chỉ : nakanart@thegioiIT.com hoặc YM : nakanart, mình sẽ cung cấp source script này cho bạn !

Thân mến

tranvannhan54 viết 13:32 ngày 10/10/2018

Chào tất cả các bạn!
Mình đang làm web bằng PHP. Mình cũng đang làm một dự án web và yêu cầu phải làm menu giống trang vnexpress.
chỉ cần html và javascript thôi. tuy nhiên nếu bạn muốn làm menu động(lấy CSDL ra)cũng được.
các bạn download về xem thử nhé.OK

Upload file không được nên mình upload lên media file.

http://www.mediafire.com/?sharekey=7...4e75f6e8ebb871

Tạo menu giống trang vnexpress.net

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI