Similar menu effects

Hi, I'm sorry unclear subject and poor english, because I don't know how to describe it clearly.

I want to write a feature, I've 5 item(A,B,C...) in a section and they all have subitem, default subitem is hidden only show 5 main item.

When I click A main item, there w will only show A subitem and back button then 5 main item will be hidden, like this website when showing submenu effects.

Please give me some keyword or point.
Thanks already!!!

  • James Morris

    Hello leoventans,

    Take the following code and put it in a html file on your server. This gives a very basic illustration of how to make the switch happen. This should get you going in the right direction.

    <!DOCTYPE html>
    <html>
    <style>
    body {
        margin: 0;
        font-family: 'Lato', sans-serif;
    }
    
    .overlay {
        height: 0%;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: rgb(0,0,0);
        background-color: rgba(0,0,0, 0.9);
        overflow-y: hidden;
        transition: 0.5s;
    }
    
    .overlay-content {
        position: relative;
        top: 25%;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }
    
    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
    
    .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
    }
    
    .overlay .closebtn {
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
    }
    
    @media screen and (max-height: 450px) {
      .overlay {overflow-y: auto;}
      .overlay a {font-size: 20px}
      .overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
      }
    }
    </style>
    <body>
    
    <div id="myNav" class="overlay">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
      <div class="overlay-content">
        <a href="#" onclick="subNav()">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
    </div>
    <div id="mySubNav" class="overlay">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
      <div class="overlay-content">
        <a href="#" onclick="openNav()">Back</a>
        <a href="#">SubLink 1</a>
        <a href="#">SubLink 2</a>
        <a href="#">SubLink 3</a>
      </div>
    </div>
    <h2>Fullscreen Overlay Nav Example</h2>
    <p>Click on the element below to open the fullscreen overlay navigation menu.</p>
    <p>In this example, the navigation menu will slide downwards from the top:</p>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">? open</span>
    
    <script>
    function openNav() {
    	document.getElementById("mySubNav").style.height = "0%";
        document.getElementById("myNav").style.height = "100%";
    }
    function subNav() {
        document.getElementById("mySubNav").style.height = "100%";
    	document.getElementById("myNav").style.height = "0%";
    }
    function closeNav() {
        document.getElementById("myNav").style.height = "0%";
        document.getElementById("mySubNav").style.height = "0%";
    }
    </script>
    
    </body>
    </html>

    I hope this clarifies a bit. :slight_smile:

    Best regards,

    James Morris

  • leoventans

    Hi, James Morris

    I want effect like this website, in bottom
    LANGUAGE: ENGLISH slide from bottom.

    My country have multi level .
    Click button and overlay slide from bottom, this effect I reached it with a plugin, and It worked for desktop.

    Now, my problem is when in mobile click level 1 item then level 2 overlay slide from top and full screen.

    I want level 2 overlay just cover level 1 section, same height.

    This is my code and website

    <!DOCTYPE html>
    <html>
    <style>
    body {
        margin: 0;
        font-family: 'Lato', sans-serif;
    }
    
    .overlay {
        height: 0%;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
    
        overflow-y: hidden;
        transition: 0.5s;
    }
    
    .overlay-content {
        position: relative;
        height:100px!important;
        width: 100%;
        text-align: center;
    
    }
    
    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 14px;
        color: #818181;
        display: block;
    
    }
    
    .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
    }
    
    /*@media (max-width: 991px){
        .overlay-content {
       top:50%;
    
    }
    }*/
    
    </style>
    <body>
    
    <div id="MainNav" class="overlaya">
      <div class="overlay-content">
        <table style="height: 66px; table-layout: fixed;" width="100%">
            <tbody>
                <tr>
                    <td style="text-align: center;"><a href="#" onclick="AmericasNav()">Americas</a></td>
                    <td style="text-align: center;"><a href="#" onclick="AsiaNav()">Asia</a></td>
                    <td style="text-align: center;"><a href="#" onclick="MiddleeastNav()" >Middle east</a></td>
                    <td style="text-align: center;"><a href="#" onclick="EuropeNav()" >Europe</a></td>
                    <td style="text-align: center;"><a href="#" onclick="AfricaNav()" >Africa</a></td>
                </tr>
            </tbody>
        </table>
       </div>
    </div>
    
    <div id="AmericasNav" class="overlay" style="height:0%;">
    
      <div class="overlay-content">
                        <table style="height: 66px; text-align: center; table-layout: fixed;" width="100%">
                            <tbody>
                                    <tr>
    
                                        <td style="text-align: left;"> <a href="javascript:void(0)" onclick="AmericasMainNav()">Back</a></td>
                                        <td> </td>
                                        <td> </td>
                                        <td> </td>
    
                                    </tr>
                                    <tr>
                                        <td><a href="#">Belize</a></td>
                                        <td><a href="#">Canada</a></td>
                                        <td><a href="#">Mexico</a></td>
                                        <td><a href="#">United States</a></td>
                                    </tr>
                            </tbody>
                        </table>
        </div>
    </div>
    
    <div id="AsiaNav" class="overlay" style="height:0%;">
        <div class="overlay-content">
            <table style="height: 66px; text-align: center; table-layout: fixed;" width="100%">
                <tbody>
                    <tr>
                        <td style="text-align: left;"> <a href="#" onclick="AsiaMainNav()">Back</a></td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td><a href="#">Asia/Oceania</a></td>
                        <td><a href="#">China</a></td>
                        <td><a href="#">Hong Kong </a></td>
                        <td><a href="#">South Korea</a></td>
                        <td><a href="#">Taiwan</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <div id="EuropeNav" class="overlay" style="height:0%;">
        <div class="overlay-content">
            <table style="height: 66px; text-align: center; table-layout: fixed;" width="100%">
                <tbody>
                    <tr>
                        <td style="text-align: left;"> <a href="#" onclick="EuropeMainNav()">Back</a></td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td><a href="#">Rest of Europe</a></td>
                        <td><a href="#">Belgium</a></td>
                        <td><a href="#">Czech Republic</a></td>
                        <td><a href="#">Denmark</a></td>
                        <td><a href="#">Finland</a></td>
                        <td><a href="#">France</a></td>
                        <td><a href="#">Germany</a></td>
                        <td><a href="#">Italy</a></td>
                        <td><a href="#">Netherlands</a></td>
                    </tr>
                     <tr>
                        <td><a href="#">Norway</a></td>
                        <td><a href="#">Poland</a></td>
                        <td><a href="#">Portugal</a></td>
                        <td><a href="#">Romania</a></td>
                        <td><a href="#">Russia</a></td>
                        <td><a href="#">Spain</a></td>
                        <td><a href="#">Sweden</a></td>
                        <td><a href="#">United Kingdom</a></td>
    
                    </tr>
               </tbody>
            </table>
        </div>
    </div>
    
    <div id="MiddleeastNav" class="overlay" style="height:0%;">
        <div class="overlay-content">
            <table style="height: 66px; text-align: center; table-layout: fixed;" width="100%">
                <tbody>
                    <tr>
                        <td style="text-align: left;"> <a href="#" onclick="MiddleeastMainNav()">Back</a></td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td><a href="#">Israel</a></td>
                        <td><a href="#">United Arab Emirates</a></td>
                        <td><a href="#">Rest of Middle East</a></td>
                        <td><a href="#">Turkey</a></td>
                        <td><a href="#">Saudi Arabia</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <div id="AfricaNav " class="overlay " style="height:0%; ">
        <div class="overlay-content ">
            <table style="height: 66px; text-align: center; table-layout: fixed; " width="100% ">
                <tbody>
                    <tr>
                        <td style="text-align: left;"> <a href="#" onclick="AfricaMainNav()">Back</a></td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td><a href="#">Egypt</a></td>
                        <td><a href="#">Kenya</a></td>
                        <td><a href="#">Morocco</a></td>
                        <td><a href="#">Nigeria</a></td>
                        <td><a href="#">South Africa</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <script>
    function AmericasNav() {
        document.getElementById("AmericasNav").style.height = "100%";
        document.getElementById("MainNav").style.height = "0%";
    }
    function AmericasMainNav() {
        document.getElementById("AmericasNav").style.height = "0%";
        document.getElementById("MainNav").style.height = "100%";
    }
    
    function AsiaNav() {
        document.getElementById("AsiaNav").style.height = "100%";
        document.getElementById("MainNav").style.height = "0%";
    }
    
    function AsiaMainNav() {
        document.getElementById("AsiaNav").style.height = "0%";
        document.getElementById("MainNav").style.height = "100%";
    }
    
    function EuropeNav() {
        document.getElementById("EuropeNav").style.height = "100%";
        document.getElementById("MainNav").style.height = "0%";
    }
    
    function EuropeMainNav() {
        document.getElementById("EuropeNav").style.height = "0%";
        document.getElementById("MainNav").style.height = "100%";
    }
    
    function MiddleeastNav() {
        document.getElementById("MiddleeastNav").style.height = "100%";
        document.getElementById("MainNav").style.height = "0%";
    }
    
    function MiddleeastMainNav() {
        document.getElementById("MiddleeastNav").style.height = "0%";
        document.getElementById("MainNav").style.height = "100%";
    }
    
    function AfricaNav() {
        document.getElementById("AfricaNav ").style.height = "100% ";
        document.getElementById("MainNav ").style.height = "0% ";
    }
    
    function AfricaMainNav() {
        document.getElementById("AfricaNav ").style.height = "0% ";
        document.getElementById("MainNav ").style.height = "100% ";
    }
    </script>
    
    </body>
    </html>

    Thanks for your help and patient.

  • James Morris

    Hello leoventans,

    The following HTML will keep your secondary menu the same height as the primary menu. There's some color changes I made just to make testing a little easier when viewing as a standalone HTML page.

    Just a word of caution: Using tables for HTML layout is not a good idea. This will cause all kinds of issues with accessibility and usability, especially on mobile devices. It would be better to use unordered lists with list-style:none and float:left to achieve a similar result. The following link explains one way you can make your unordered list display like a table. http://stackoverflow.com/questions/13824918/how-to-style-my-unordered-list-like-a-table

    Here's the code for the menu with the submenu being the same height. I hope this helps! :slight_smile:

    <!DOCTYPE html>
    <html>
    <style>
    body {
        margin: 0;
        font-family: 'Lato', sans-serif;
    	background-color:orange;
    }
    
    .overlay {
        height:0%;
        width: 100%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        overflow-y: hidden;
        transition: 0.5s;
    	background-color:black;
    }
    
    .overlay-content {
        position: relative;
        height:66px!important;
        width: 100%;
        text-align: center;
    }
    
    .overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 14px;
        color: #818181;
        display: block;
    
    }
    
    .overlay a:hover, .overlay a:focus {
        color: #f1f1f1;
    }
    
    /*@media (max-width: 991px){
        .overlay-content {
       top:50%;
    
    }
    }*/
    .back-button{
    background-color:silver;
    }
    #MainNav{
    background-color:white;
    }
    </style>
    <body>
    <div id="MainNav" class="overlay-content">
    <table style="height: 66px; table-layout: fixed;" width="100%">
    	<tbody>
    		<tr>
    			<td style="text-align: center;"><a href="#" onclick="AmericasNav()">Americas</a></td>
    			<td style="text-align: center;"><a href="#" onclick="AsiaNav()">Asia</a></td>
    			<td style="text-align: center;"><a href="#" onclick="MiddleeastNav()" >Middle east</a></td>
    			<td style="text-align: center;"><a href="#" onclick="EuropeNav()" >Europe</a></td>
    			<td style="text-align: center;"><a href="#" onclick="AfricaNav()" >Africa</a></td>
    		</tr>
    	</tbody>
    </table>
    </div>
    <div id="AmericasNav" class="overlay" style="height:0%;">
    
      <div class="overlay-content">
                        <table style="height: 66px; text-align: center; table-layout: fixed;" width="100%">
                            <tbody>
                                    <tr>
    									<td class="back-button"><a href="javascript:void(0)" onclick="AmericasMainNav()">Back</a></td>
                                        <td><a href="#">Belize</a></td>
                                        <td><a href="#">Canada</a></td>
                                        <td><a href="#">Mexico</a></td>
                                        <td><a href="#">United States</a></td>
                                    </tr>
                            </tbody>
                        </table>
        </div>
    </div>
    
    <div id="AsiaNav" class="overlay" style="height:0%;">
        <div class="overlay-content">
            <table style="height: 66px; text-align: center; table-layout: fixed;" width="100%">
                <tbody>
                    <tr>
    					<td class="back-button"><a href="#" onclick="AsiaMainNav()">Back</a></td>
                        <td><a href="#">Asia/Oceania</a></td>
                        <td><a href="#">China</a></td>
                        <td><a href="#">Hong Kong </a></td>
                        <td><a href="#">South Korea</a></td>
                        <td><a href="#">Taiwan</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <div id="EuropeNav" class="overlay" style="height:0%;">
        <div class="overlay-content">
            <table style="height: 66px; text-align: center; table-layout: fixed;" width="100%">
                <tbody>
                    <tr>
    					<td class="back-button" rowspan="2"><a href="#" onclick="EuropeMainNav()">Back</a></td>
                        <td><a href="#">Rest of Europe</a></td>
                        <td><a href="#">Belgium</a></td>
                        <td><a href="#">Czech Republic</a></td>
                        <td><a href="#">Denmark</a></td>
                        <td><a href="#">Finland</a></td>
                        <td><a href="#">France</a></td>
                        <td><a href="#">Germany</a></td>
                        <td><a href="#">Italy</a></td>
                        <td><a href="#">Netherlands</a></td>
                    </tr>
                     <tr>
    					<td></td>
                        <td><a href="#">Norway</a></td>
                        <td><a href="#">Poland</a></td>
                        <td><a href="#">Portugal</a></td>
                        <td><a href="#">Romania</a></td>
                        <td><a href="#">Russia</a></td>
                        <td><a href="#">Spain</a></td>
                        <td><a href="#">Sweden</a></td>
                        <td><a href="#">United Kingdom</a></td>
    
                    </tr>
               </tbody>
            </table>
        </div>
    </div>
    
    <div id="MiddleeastNav" class="overlay" style="height:0%;">
        <div class="overlay-content">
            <table style="height: 66px; text-align: center; table-layout: fixed;" width="100%">
                <tbody>
                    <tr>
    					<td class="back-button"><a href="#" onclick="MiddleeastMainNav()">Back</a></td>
                        <td><a href="#">Israel</a></td>
                        <td><a href="#">United Arab Emirates</a></td>
                        <td><a href="#">Rest of Middle East</a></td>
                        <td><a href="#">Turkey</a></td>
                        <td><a href="#">Saudi Arabia</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <div id="AfricaNav " class="overlay " style="height:0%; ">
        <div class="overlay-content ">
            <table style="height: 66px; text-align: center; table-layout: fixed; " width="100% ">
                <tbody>
                    <tr>
    					<td class="back-button"><a href="#" onclick="AfricaMainNav()">Back</a></td>
                        <td><a href="#">Egypt</a></td>
                        <td><a href="#">Kenya</a></td>
                        <td><a href="#">Morocco</a></td>
                        <td><a href="#">Nigeria</a></td>
                        <td><a href="#">South Africa</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <script>
    function AmericasNav() {
        document.getElementById("AmericasNav").style.height = "66px";
        document.getElementById("MainNav").style.height = "0%";
    }
    function AmericasMainNav() {
        document.getElementById("AmericasNav").style.height = "0%";
        document.getElementById("MainNav").style.height = "66px";
    }
    
    function AsiaNav() {
        document.getElementById("AsiaNav").style.height = "66px";
        document.getElementById("MainNav").style.height = "0%";
    }
    
    function AsiaMainNav() {
        document.getElementById("AsiaNav").style.height = "0%";
        document.getElementById("MainNav").style.height = "66px";
    }
    
    function EuropeNav() {
        document.getElementById("EuropeNav").style.height = "66px";
        document.getElementById("MainNav").style.height = "0%";
    }
    
    function EuropeMainNav() {
        document.getElementById("EuropeNav").style.height = "0%";
        document.getElementById("MainNav").style.height = "66px";
    }
    
    function MiddleeastNav() {
        document.getElementById("MiddleeastNav").style.height = "66px";
        document.getElementById("MainNav").style.height = "0%";
    }
    
    function MiddleeastMainNav() {
        document.getElementById("MiddleeastNav").style.height = "0%";
        document.getElementById("MainNav").style.height = "66px";
    }
    
    function AfricaNav() {
        document.getElementById("AfricaNav ").style.height = "66px";
        document.getElementById("MainNav ").style.height = "0% ";
    }
    
    function AfricaMainNav() {
        document.getElementById("AfricaNav ").style.height = "0% ";
        document.getElementById("MainNav ").style.height = "66px";
    }
    </script>
    
    </body>
    </html>

    Best regards,

    James Morris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.