Is it possible to have a centered fullscreen main section at the very center of the webpage?
<div id="main"></div>
The main section will display a default web page:
<script>
$("#main").html('<object data="http://www.myweb.com"/>');
</script>
In addition, there are two hidden side navigation bars (one on the left and one on the right) that can be shown by clicking on buttons. These sidebars contain lists of links. When sidenavLeft is displayed, the main section will shift to the right, and when sidenavRight is shown, the main section will move to the left. By clicking on the links inside the side navigation menus, the default main page can be changed.
I'm trying to figure out how to instruct #main to move to the right when sidenavLeft is displayed and to the left when sidenavRight is shown. I believe CSS conditionals may be needed, but as far as I know, CSS does not support conditionals.
/* When sidenavRight is shown, push the main content to the left */
#main {
transition: margin-right .5s;
}
/* When sidenavLeft is shown, push the main content to the right */
#main {
transition: margin-left .5s;
}
What is the best way to achieve this using CSS, jQuery, or JavaScript?