1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Making submenu expand on click

Discussion in 'HTML & Website Design' started by Soupi, Feb 5, 2020.

0
  1. #1
    I was able to solve it I am trying to have my "about" and "rooms" dropdown to be able to only expand when clicked on and displaying a small arrow similar https://www.syracuse.edu/ in their "Info For" dropdown. When tabbing through it can work as is.

    Also I noticed that in when tabbing through the menu and tabbing backwards (shift+tab) it dosnt go back up the dropdown why is that? Another issue is when I shrink the window to display the quick menu and tabbing through the menu it skips the about and rooms link why is that?

    Here is the code i have so far, thank you.
    
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Author URL: https://codepen.io/andornagy/pen/RNeydj
Description: A Generic Hierarchical Menu Navigation
Version: 1-->
<style>
/* CSS Document */
body {
    background: #212121;
    font-size:22px;
    line-height: 32px;
    color: #ffffff;
    margin: 0;
    padding: 0;
    word-wrap:break-word !important;
    font-family: 'Open Sans', sans-serif;
       
        height: 100vh;  /*100% of the viewport*/
        display: flex;
        flex-direction: column;
    }
    .scroll {
        overflow-y: scroll;
}     
h1 {
    font-size: 60px;
    text-align: center;
    color: #FFF;
}   

h3 {
    font-size: 30px;
    line-height: 34px;
    text-align: center;
    color: #FFF;
}

h3 a {
    color: #FFF;
}

a {
    color: #FFF;
}

h1 {
    margin-top: 100px;
    text-align:center;
    font-size:60px;
    line-height: 70px;
    font-family: 'Bree Serif', 'serif';
    }

#container {
    margin: 0 auto;
    max-width: 890px;
}

p {
    text-align: center;
}

.toggle,
[id^=drop] {
    display: none;
}

/* Giving a background-color to the nav container. */
nav { 
    margin:0;
    padding: 0;
    background-color: #E64A19;
}

#logo {
    display: block;
    padding: 0 30px;
    float: left;
    font-size:20px;
    line-height: 60px;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */

nav:after {
    content:"";
    display:table;
    clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" */
nav ul {
    float: right;
    padding:0;
    margin:0;
    list-style: none;
    position: relative;
    }
   
/* Positioning the navigation items inline */
nav ul li {
    margin: 0px;
    display:inline-block;
    float: left;
    background-color: #E64A19;
    }

/* Styling the links */
nav a {
    display:block;
    padding:14px 20px;   
    color:#FFF;
    font-size:17px;
    text-decoration:none;
}


nav ul li ul li:hover { background: #000000; }

/* Background color change on Hover */
nav a:hover { 
    background-color: #000000; 
        text-decoration: underline; 

}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
    display: none;
    position: absolute; 
    /* has to be the same number as the "line-height" of "nav a" */
    top: 60px; 
}
   
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    display:inherit;
       
}
   
/* Fisrt Tier Dropdown */
nav ul ul li {
    width:170px;
    float:none;
    display:list-item;
    position: relative;
}

/* Second, Third and more Tiers   
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
    position: relative;
    top:-60px;
    /* has to be the same number as the "width" of "nav ul ul li" */ 
    left:170px; 
}


/* Making dropdowns tabbable */
li ul {display: none;}

li:focus-within ul,
li:hover ul {display: block;}

/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

    #logo {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        float: none;
    }

    nav {
        margin: 0;
    }

    /* Hide the navigation menu by default */
    /* Also hide the  */
    .toggle + a,
    .menu {
        display: none;
    }

    /* Stylinf the toggle lable */
    .toggle {
        display: block;
        background-color: #E64A19;
        padding:14px 20px;   
        color:#FFF;
        font-size:17px;
        text-decoration:none;
        border:none;
    }

    .toggle:hover {
        background-color: #000000;
    }

    /* Display Dropdown when clicked on Parent Lable */
    [id^=drop]:checked + ul {
        display: block;
    }

    /* Change menu item's width to 100% */
    nav ul li {
        display: block;
        width: 100%;
        }

    nav ul ul .toggle,
    nav ul ul a {
        padding: 0 40px;
    }

    nav ul ul ul a {
        padding: 0 80px;
    }

    nav a:hover,
    nav ul ul ul a {
        background-color: #000000;
    }
    nav ul li ul li .toggle,
    nav ul ul a,
  nav ul ul ul a{
        padding:14px 20px;   
        color:#FFF;
        font-size:17px; 
    }
    nav ul li ul li .toggle,
    nav ul ul a {
        background-color: #212121; 
    }

    /* Hide Dropdowns by Default */
    nav ul ul {
        float: none;
        position:static;
        color: #ffffff;
        /* has to be the same number as the "line-height" of "nav a" */
    }
       
    /* Hide menus on hover */
    nav ul ul li:hover > ul,
    nav ul li:hover > ul {
        display: none;
    }
       
    /* Fisrt Tier Dropdown */
    nav ul ul li {
        display: block;
        width: 100%;
    }

    nav ul ul ul li {
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */ 

    }

}

@media all and (max-width : 330px) {

    nav ul li {
        display:block;
        width: 94%;
    }

}
</style>
<title>Menu Navigation Test</title>
</head>
<body>
    <header> <nav>
        <div id="logo">Syracuse University Libraries</div>

        <label for="drop" class="toggle">Menu</label>
        <input type="checkbox" id="drop" />
            <ul class="menu">
                <li><a href="#">Home</a></li>
                <li>
                    <!-- First Drop Down -->
                <label for="drop-1" class="toggle">About</label>
                <a href="#">About</a>
         
                <ul>
                    <li><a href="#">Departments</a></li>
                    <li><a href="#">News</a></li>
                </ul> 

            </li>
            <li>
                <!-- First Drop Down -->
                <label for="drop-2" class="toggle">Rooms</label>
                <a href="#">Rooms</a>
                <input type="checkbox" id="drop-2"/>
                <ul>
                    <li><a href="#">Resources</a></li>
                    <li><a href="#">Links</a></li>
                    <li>
                    <!-- Second Drop Down -->       
                    <label for="drop-3" class="toggle">Spaces</label>
                    <a href="#">Rooms</a>         
                    <input type="checkbox" id="drop-3"/>
                    </li>
                </ul>
                </li>
                <li><a href="#">Special Collections</a></li>
                <li><a href="#">Giving</a></li>
                <li><a href="#">More</a></li>
            </ul>
        </nav></header> 
   
 <!-- Sample Text --> 
<section class="scroll" id="content"><h1><p>This is a Generic Hierarchical Menu Navigation.</p></h1>
<p>This is a Generic Hierarchical Menu Navigation.</p>
<p>This is a Generic Hierarchical Menu Navigation.</p>
<p>This is a Generic Hierarchical Menu Navigation.</p>
<p>This is a Generic Hierarchical Menu Navigation.</p>
<p>This is a Generic Hierarchical Menu Navigation.</p>
<p>This is a Generic Hierarchical Menu Navigation.</p>
<p>This is a Generic Hierarchical Menu Navigation.</p>
<p>This is a Generic Hierarchical Menu Navigation.</p></section>
        <nav><footer>

Copyright © 2020 Syracuse University Libraries
        </footer> </nav>
       <!-- Core Javascript Bottom -->
        <script src="/assets/plugins/jquery-1.12.3.min.js" type="text/javascript"></script> 
        <script src="/assets/plugins/back-to-top.js" type="text/javascript"></script>

</body>


</html>
    Code (markup):
     
    Soupi, Feb 5, 2020 IP