Side Menu without need for many pages - php

Question

So I have a layout system that I am working on that allows users to click on links on a side menu to access some services.
So basically here is the simple html design
<div class="col-md-2" id="admin_menu">
<section class="list-group">
opt 1
opt 2
opt 3
Opt 4
</section>
</div>
<div class="col-md-10" id="admin_content">
<section class="">
Some content
</section>
</div>
The layout is working as i want it to. A small menu to the left and the main content to the right.
But I have a small issue with the design. As you can see the content is all on one page. When the user clicks on the opt2,3,4 links, he or she will be redirected to the respective page which will also contain the side menu.
So my questions are
What is the most convenient way/ways to create such a design whose
menu is needed in more than one interface.
How do i make the active link change color considering that most
likely the whole page will reload.
Here is the image for the design. The first link shows the style that the active link should have

Answer 1

include "menu.php";
And menu.php contains the menu.
Also works with
require_once "menu.php";
For question two, give each item a unique numbereid (listitem1, listitem2...) and on the page itself create a style tag:
<style>
#listitem1 {
whatever...
}
</style>
Depending on the page.

Answer 2

You can try this code i arranged for you:
1)first you can add some id in your code to identify in a unique way each link
2) second you just add some jquery code in the end of the body of the html code
the idea is that when you send the mouse over the link it changes color you can specify the color by yourself and when the mouse is out it changes color again try that i did it only for the first 3 links but you can do it for many link when you get the idea.
<div class="col-md-2" id="admin_menu">
<section class="list-group">
opt 1
opt 2
opt 3
Opt 4
</section>
</div>
<div class="col-md-10" id="admin_content">
<section class="">
Some content
</section>
</div>
<script>
$(document).ready(function(){
$("#first").mouseover(function () {
$("#first").css({
'color':'red'
});
});
$("#first").mouseout(function () {
$("#first").css({
'display':'lightgray'
});
});
});
$(document).ready(function(){
$("#second").mouseover(function () {
$("#second").css({
'color':'blue'
});
});
$("#second").mouseout(function () {
$("#second").css({
'display':'lightgray'
});
});
});
$(document).ready(function(){
$("#third").mouseover(function () {
$("#third").css({
'color':'yellow'
});
});
$("#third").mouseout(function () {
$("#third").css({
'display':'lightgray'
});
});
});
</script>

Answer 3

As #Faried said, you can include the menu into the main page.
And as for the second question you can use
<?php if(isset($_GET['page']) && $_GET['page']=="pageName")
{
//style for active link
} else
{
//non-active style
}