如何将现有菜单更改为响应式设计？
[英]How to change existing menu to responsive design?
问题描述
我使用 php、html 和 css 创建网站。 其不存在的响应式站点。 我想将现有菜单更改为响应我的网站？
我的菜单 Global Naivagtion 和管理界面显示无响应？ 我的代码是它设计的表？我将如何更改任何方法？
这里我的代码粘贴在这里：
<?php
$session_file=$dir_sessions.".".$sid;
if(file_exists($session_file)&&$sid!="")
{
//echo "if";
$sfile=file($session_file);
$sinfo=explode("||",$sfile[0]);
#################################################
$lms_userID=$sinfo[0];
$lms_exptime=$sinfo[1];
$lms_username=$sinfo[2];
$lms_useremail=$sinfo[3];
$lms_userlevel=$sinfo[4];
$lms_user_group=$sinfo[5];
$lms_user_subgroup=$sinfo[6];
$lms_usergroup_file=$sinfo[7];
$lms_org=$sinfo[8];
}
?>
<script type="text/javascript">
function changePassword()
{
window.open('changepassword.php','ChangePassword','resizable=0,width=650,height=550,scrollbars=0');
}
</script>
<div id="menu">
<br />
<table width="186" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="186"> </td>
</tr>
<tr>
<td width="186" ><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><B> Global Navigation</B></font></td>
</tr>
<?php
if($lms_userlevel!=1){
?>
<!-- <tr >
<td width="186" background="images/menubg.gif"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><img src="images/bullet.gif" align="absmiddle"> <A HREF="index.php?section=register&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;">New Users</A></font></td>
</tr>
<tr >
<td width="186" background="images/menubg.gif"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><img src="images/bullet.gif" align="absmiddle"> <A HREF="index.php?section=login&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;">Log In</A></font></td>
</tr>-->
<?php
}
?>
<tr >
<td width="186" ><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=landing&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Main</A> </font></td>
</tr>
<tr >
<td width="186"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=enrollment&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Your Enrollment</A> </font></td>
</tr>
<tr >
<td width="186" ><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=courselist&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Courses </A> </font></td>
</tr>
<?php $status="no"; if($lms_userlevel>=2){ $status="yes"?>
<tr >
<td width="186" ><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=reports&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Reports</A> </font></td>
</tr>
<?php }?>
<tr >
<td width="186"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=news&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> News</A> </font></td>
</tr>
<tr >
<td width="186"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=messageboard&sid=<?php echo $sid; ?>" ; STYLE="text-decoration:none;COLOR:#3E3E3E;"> Message Board</A> </font></td>
</tr>
<tr >
<td width="186" ><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=library&sid=<?php echo $sid; ?>"; STYLE="text-decoration:none;COLOR:#3E3E3E;"> Repository</A> </font></td>
</tr>
<!--
<tr >
<td width="186" background="images/menubg.gif"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><img src="images/bullet.gif" align="absmiddle"> <A HREF="index.php?section=forums&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;">User Forums</A> </font></td>
</tr>
<tr >
<td width="186" background="images/menubg.gif"><img src="images/bullet.gif" align="absmiddle"> <font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=search&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;">Search</A> </font></td>
</tr>
<tr >
<td width="186" background="images/menubg.gif"><img src="images/bullet.gif" align="absmiddle"> <font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="index.php?section=news&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;">What's New</A> </font></td>
</tr>
-->
</table>
<?php
//echo "level = ".$lms_userlevel;
if($lms_userlevel>=3){
?>
<table width="186" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="186"> </td>
</tr>
<tr >
<td width="186"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><A HREF="#" onClick="window.open('admin/admin.php?sid=<?php echo $sid; ?>','ADMIN','fullscreen,scrollbars=yes')"; STYLE="text-decoration:none;COLOR:#3E3E3E;"><strong> Admin Interface</strong></A> </font></td>
</tr>
<tr>
<td width="186"> </td>
</tr>
</table>
<?php }?>
<table width="186" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="auto"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><strong> Public Documents</strong></font></td>
</tr>
<tr>
<td width="auto"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><a href="index.php?section=faqs&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> FAQs</a></font></td>
</tr>
<tr>
<td width="auto"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><a href="index.php?section=newsletter&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Newsletters</a></font></td>
</tr>
<tr>
<td width="auto"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><a href="index.php?section=additional_resources&sid=<?php echo $sid; ?>" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Additional Resources</a></font></td>
</tr>
</table>
<table width="186" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="auto"><font size="2" face="Verdana, Arial, Helvetica, sans-serif" color="#3E3E3E"><a href="javascript:changePassword();" STYLE="text-decoration:none;COLOR:#3E3E3E;"> Change Password</a></font></td>
</tr>
<tr>
<td width="auto" rowspan="3"> </td>
<td width="auto" rowspan="3"> </td>
<td width="auto" rowspan="3"> </td>
</tr>
</table>
</div>
任何方法请帮助我？
2 个解决方案
解决方案1
1 2015-06-13 12:26:54
我也在学习中。 如果我是你，我会怎么做。 我会首先根据您拥有的元素创建一个响应式布局，然后相应地迁移您的 php 代码。
1) 计划您希望布局的响应程度。 只是为了适应不同的电脑屏幕尺寸，比如全宽可调整大小？ 或者在分辨率改变时使用不同的布局。
2) 使用不同的 div(s), ul(s), li(s) 而不是一个表格，这样您就可以更轻松地管理和移动元素。
3) 使用百分比而不是固定像素宽度。
当然，到那时你会遇到很多定位、间距、边距、填充的问题，但至少你开始了。
有很多框架告诉你，你可以在 15 分钟内建立一个负责任的网站。 相信我，这是谎言。 它适用于更有经验的开发人员，他们知道自己在做什么。
立即解决方案：创建一个类似于以下内容的 css 文件：
table, tr, th, td {
box-sizing: border-box;
}
table.content {
border-collapse: collapse;
width: 100%;
}
th {
font-weight: bold;
background-color: black;
}
td.course_title {
background-color: white;
width: 30%;
}
td.launch_link {
width: 30%;
}
// assign class to your table and tds
上面有很多缺失的元素。 只是给你一个想法。 希望能帮助您入门。
祝你好运。
解决方案2
0 2015-07-17 11:57:26
首先，当你想制作一个响应式网站时，你永远不会使用表格。 您可以使用媒体查询，但如果您尝试使用表格，您将被困在这个网站上。 就是说。 为你未来的知识和美好。 在这里你可以看到和理解更多，但谷歌上有更多的例子。
如何使用响应式设计将此菜单置于移动终端中心
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.