I'm facing an issue with adjusting the layout of my pages when the main Menu collapses. The links that drop down from the Menu are staying on top of the content, and I want them to move down as well. Unfortunately, since some of my pages are integrated from Wordpress, I am unable to access the code to make this adjustment.
Below is the HTML code:
<nav id="navigation">
<a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">☰ MENU</a>
<ul id="navigation_list" role="navigation">
<li><a href="Dicas.html">Dicas</a></li>
<li><a href="Viagens.html">Viagens</a></li>
<li><a href="Paises.html">Paises</a></li>
<li><a href="Comboios.html">Comboios</a></li>
<li><a href="http://localhost/Interrail/public_html/blog/wordpress/">Blog</a></li>
</ul>
The Javascript function:
<script>
var originalNavClasses;
function toggleNav() {
var elem = document.getElementById('navigation_list');
var classes = elem.className;
if (originalNavClasses === undefined) {
originalNavClasses = classes;
}
elem.className = /expanded/.test(classes) ? originalNavClasses : originalNavClasses + ' expanded';
}
</script>
And here is the CSS code for styling:
#navigation {
padding: 10px;
background-color: #000;
color: #fff;
text-align: right;}
#navigation ul {
display: none;
list-style: none;
margin-right: 0;
padding-left: 0;
margin-bottom: 0;}
#navigation ul.expanded {
display: block;}
#navigation li a {
display: block;
padding: 10px 0;
border-top: 1px solid #666;
font-size: 1.2em;
color: #ccc;
text-decoration: none;}
.menu_button {
display: block;
text-align: right;
color: #ffc;
text-decoration: none;}
.menu_button:hover {
color: #58cbdb;
text-decoration: none;}
You can view the demonstration on this FIDDLE link.