How to change existing menu to responsive design?

Question

I creating web site using php and html and 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? 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">&nbsp;</td>
             </tr>
              <tr> 
                <td width="186" ><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><B>&nbsp;&nbsp;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;">&nbsp;&nbsp;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;">&nbsp;&nbsp;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;">&nbsp;&nbsp;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;">&nbsp;&nbsp;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;">&nbsp;&nbsp;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;">&nbsp;&nbsp;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;">&nbsp;&nbsp;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">&nbsp;</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>&nbsp;&nbsp;Admin Interface</strong></A> </font></td>
              </tr>     

              <tr>
                <td width="186">&nbsp;</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>&nbsp;&nbsp;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;"> &nbsp;&nbsp;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;"> &nbsp;&nbsp;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;"> &nbsp;&nbsp;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;">&nbsp;&nbsp;Change Password</a></font></td>
   </tr>
    <tr>
       <td width="auto" rowspan="3">&nbsp;</td>
        <td width="auto" rowspan="3">&nbsp;</td>
         <td width="auto" rowspan="3">&nbsp;</td>      
   </tr>
</table>


</div>

any method please help me ?

Answer 1

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.

1) Plan how responsive you want your layout to be. 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.

3) Use percentage instead of fixed pixel width.

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. 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:

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.

Answer 2

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.