javascript - How to change existing menu to responsive design? -
i creating web site using php , html , css. non existing responsive site. want change menu existing responsive site ? 
my menu global naivagtion , admin interface showing non responsive? code designed table?how change method ?
here 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 me ?
i in learning process too. if you. first create responsive layout based on elements have migrate php codes accordingly.
1) plan how responsive want layout be. fit different computer screen size full width resizable? or different layout when resolution changes.
2) use different div(s), ul(s), li(s) instead of 1 table, can manage , move around elements easier.
3) use percentage instead of fixed pixel width.
of course, then, encounter lot of positioning, spacing, margin, padding problem @ least started.
there lot of frameworks out there telling you can build responsible website in 15 minutes. trust me, it's lie. it's more experienced developers know doing.
immediate solution: create css file like:
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 table , tds there lot of missing element above. give idea. hope helps started.
good luck.
Comments
Post a Comment