如何将现有菜单更改为响应式设计？
[英]How to change existing menu to responsive design?
问题描述
I creating web site using php and html and css.
我使用 php、html 和 css 创建网站。 its non existing Responsive site.其不存在的响应式站点。 i want change my menu existing to Responsive my site ?我想将现有菜单更改为响应我的网站？
My menu Global Naivagtion and admin interface its showing non responsive?我的菜单 Global Naivagtion 和管理界面显示无响应？ my code its designed table?how i will change any method ?我的代码是它设计的表？我将如何更改任何方法？
here my code paste here:这里我的代码粘贴在这里：
<?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>
any method please help me ?任何方法请帮助我？
2 个解决方案
解决方案1
1 2015-06-13 12:26:54
I am in a learning process too.我也在学习中。 What I would do if I were you.如果我是你，我会怎么做。 I would first create a responsive layout based on the elements that you have then migrate your php codes accordingly.我会首先根据您拥有的元素创建一个响应式布局，然后相应地迁移您的 php 代码。
1) Plan how responsive you want your layout to be. 1) 计划您希望布局的响应程度。 Just to fit different computer screen size like full width resizable?只是为了适应不同的电脑屏幕尺寸，比如全宽可调整大小？ Or with a different layout when the resolution changes.或者在分辨率改变时使用不同的布局。
2) Use different div(s), ul(s), li(s) instead of one table, so you can manage and move around your elements easier. 2) 使用不同的 div(s), ul(s), li(s) 而不是一个表格，这样您就可以更轻松地管理和移动元素。
3) Use percentage instead of fixed pixel width. 3) 使用百分比而不是固定像素宽度。
Of course, by then, you will encounter a lot of positioning, spacing, margin, padding problem but at least you get started.当然，到那时你会遇到很多定位、间距、边距、填充的问题，但至少你开始了。
There are a lot of frameworks out there telling you that you can build a responsible website in 15 minutes.有很多框架告诉你，你可以在 15 分钟内建立一个负责任的网站。 Trust me, it's a lie.相信我，这是谎言。 It's for more experienced developers who know what they are doing.它适用于更有经验的开发人员，他们知道自己在做什么。
Immediate solution: create a css file with something like:立即解决方案：创建一个类似于以下内容的 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
There are a lot of missing element above.上面有很多缺失的元素。 Just to give you an idea.只是给你一个想法。 Hope that helps you get started.希望能帮助您入门。
Good luck.祝你好运。
解决方案2
0 2015-07-17 11:57:26
First of all, you never use tables when you want to make a responsive website.首先，当你想制作一个响应式网站时，你永远不会使用表格。 And you can use media queries but if your will try with tables you will get your head stuck on this site.您可以使用媒体查询，但如果您尝试使用表格，您将被困在这个网站上。 Just saying.就是说。 For your future knowledge and good.为你未来的知识和美好。 Here you can see and understand more but there are a lot more examples on Google.在这里你可以看到和理解更多，但谷歌上有更多的例子。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.