Mobile menu

Nicole Foster's Avatar

Nicole Foster

20 Jul, 2015 02:01 PM

Hi,

On our sites, we're looking for a way to make our navigation friendly even on a mobile screen. Here is the site we're working on: http://parents.syr.edu

We're using media queries and screen sizes to determine when the mobile menu should replace the current one. It displays fine, but because the site has sub-level navigation and no index page for the folders "About" and etc, the navigation items click out to nowhere.

I have been experimenting trying to get the sub-level navigation items, that usually only display on hover, to show up when you click on the navigation item. Either way, the sub-level navigation items just need to be there so the user can move around the site.

Some of our code includes:

Nav format block:

<xsl:stylesheet
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" omit-xml-declaration="yes"/>
    <xsl:template match="system-index-block">
        <nav class="clearfix">
            <ul id="nav-topical">
                <li>
                    <a href="/">Home</a>
                </li>
                <xsl:apply-templates select="system-folder | system-symlink"/>
            </ul>
            <a href="#" id="pull">Menu</a>
        </nav>
    </xsl:template>
    <xsl:template match="system-folder">
        <li>
            <xsl:if test="@current='true'">
                <xsl:attribute name="class">selected</xsl:attribute>
            </xsl:if>
            <a>
                <xsl:attribute name="href">[system-asset]
                    <xsl:value-of select="path"/>/index[/system-asset]
                </xsl:attribute>
                <xsl:attribute name="title">
                    <xsl:value-of select="display-name"/>
                </xsl:attribute>
                <xsl:value-of select="display-name"/>
            </a>
            <xsl:choose>
                <xsl:when test="count(system-folder) &gt; 0 and system-folder[name!='exhibits'] and system-folder[name!='images']">
                    <ul class="dropdownnav">
                        <xsl:choose>
                            <xsl:when test="count(ancestor::node()) &gt; 2">
                                <xsl:attribute name="class">thirdlevel</xsl:attribute>
                            </xsl:when>
                        </xsl:choose>
                        <xsl:apply-templates select="system-page[name!='index']"/>
                        <xsl:apply-templates select="system-symlink"/>
                        <xsl:apply-templates select="system-folder"/>
                    </ul>
                </xsl:when>
                <xsl:when test="count(system-page) &gt; 1 or count(system-symlink) &gt; 0">
                    <ul class="dropdownnav">
                        <xsl:choose>
                            <xsl:when test="count(ancestor::node()) &gt; 2">
                                <xsl:attribute name="class">thirdlevel</xsl:attribute>
                            </xsl:when>
                        </xsl:choose>
                        <xsl:apply-templates select="system-page[name!='index']"/>
                        <xsl:apply-templates select="system-symlink"/>
                    </ul>
                </xsl:when>
            </xsl:choose>
        </li>
    </xsl:template>
    <xsl:template match="system-page">
        <li>
            <xsl:if test="@current='true'">
                <xsl:attribute name="class">selected</xsl:attribute>
            </xsl:if>
            <a>
                <xsl:attribute name="href">
                    <xsl:text>[system-asset]</xsl:text>
                    <xsl:value-of select="path"/>
                    <xsl:text>[/system-asset]</xsl:text>
                </xsl:attribute>
                <xsl:attribute name="title">
                    <xsl:value-of select="display-name"/>
                </xsl:attribute>
                <xsl:value-of select="display-name"/>
            </a>
        </li>
    </xsl:template>
    <xsl:template match="system-symlink">
        <li>
            <a>
                <xsl:attribute name="href">
                    <xsl:value-of select="link"/>
                </xsl:attribute>
                <xsl:attribute name="title">
                    <xsl:value-of select="display-name"/>
                </xsl:attribute>
                <xsl:value-of select="display-name"/>
            </a>
        </li>
    </xsl:template>
</xsl:stylesheet>

Dropdown.css

ul#nav-topical{


}


ul#nav-topical li { float: left; border-top:2px solid #ffffff; }


ul#nav-topical li:hover { color:#3f3e3d; border-top:2px solid #ed712b;


}


#nav-topical li:hover .dropdownnav { display:block; left:auto;
}


#nav-topical li li { border:none; }


#nav-topical li li:hover { border:none; }


ul#nav-topical li.selected a, ul#nav-topical li a:hover { text-decoration: none; }


ul#nav-topical li a { display: block; }


ul#nav-topical li a:hover {


}


ul#nav-topical li ul { text-align:center;
position: absolute; text-align:right; display: none;
}


ul#nav-topical li li:hover .thirdlevel { display:block; }


ul#nav-topical li ul li { display: block; clear: left; }


ul#nav-topical li ul li a:hover, ul#nav-topical li ul li.selected a { background-image:none;


}


ul#nav-topical li.selected ul li a { background-image:none; }


ul#nav-topical li ul li ul li { display: block; clear: left; }


ul#nav-topical li ul li ul li a:hover, ul#nav-topical li ul li ul li.selected a { background-image:none;


}


ul#nav-topical li.selected ul li ul li a { background-image:none; }


ul.dropdownnav { display:block; position:relative; margin:0px 0px 0px 0px !important; padding:5px 5px 40px 5px !important; width:195px !important; z-index:500; height:auto; box-shadow:1px 1px 4px #999; background:#ffffff; }


.dropdownnav li { position:relative; margin:0px !important; padding:0px !important;


}


.dropdownnav li:hover {


}


.dropdownnav li a { display:block; margin:0px !important; padding:3px 15px 10px 15px !important; height:auto !important; font:normal 1.167em 'ITC Franklin Gothic Std MD CD', arial,helvetica, sans-serif !important; width:175px; text-align:left !important;


}


.dropdownnav li a:hover {
color:#F58527 !important; }


ul.thirdlevel { position:absolute; left:180px; top:0px; margin:0px 0px 0px 0px !important; padding:2px !important; width:195px !important; background:#ffffff !important; border-left:2px solid #373737; box-shadow: 1px 1px 3px #999; }

Partial area of mediaq.css that determines when the mobile menu appears"

#pull {
    display:none;
}


#pull .dropdownnav { display: none !important; }


.slicknav_menu { display:none; }


@media (min-width: 320px) and (max-width: 449px) {

body, html {
    width: 100%;
    max-width: 100%;
}

#pagebanner {
    display: none;
}

#social {
    display:none;
}

 #pull {
    width: 100% !important;
    height:60px;
    padding:5px;
    display:block;
}

#pull .dropdownnav {
    display:none;



}
#nav-topical {
    display: none;
}

#nav-topical li:hover .dropdownnav {
    display:none;



}
#container {
    width:100% !important;
    margin:0px;
    overflow:hidden;
    padding: 0 5px;
}

#sidebar-left {
    float: none;
    text-align: left;
    width: 100% !important;
}

#content {
    width: 320px;
    display: block;
}

header {
    margin:33px 0px 0px 0px;
    text-align:left;
}

header h1, footer h2 {
      background:none;
}

header h1 a, footer h2 a {

}

header h2 {
    display: none;
}

.sitetitle {

}

#social {
    display: none;
}

#badge {
    display:none;

}

#slides {
    display: none;
}



nav {   
    position:fixed;
    left:0px;
    top:0px;
    height: 33px;
    width:100% !important;  
} 

nav ul {  
    width: 100% !important;  
    display: block;  
    height: auto;  
}

nav li {
    display: block;
    float: none;
    width: 100% !important;
}
nav li a {
    border-bottom: 1px solid #3D3D3C;
    background:#ffffff;
}

nav a#pull {  
    display: block;  
    background-color: #eeeeee;  
    width: 100%;  
    height:33px;
    position: relative;

}  

nav a#pull:after {  
    content:&quot;&quot;;  
    background: url('/_assets/img/nav-icon.png') no-repeat;  
    width: 30px;  
    height: 30px;  
    display: inline-block;  
    position: absolute;  
    right: 15px;  
    top: 10px;

}  

#welcomestrip {
    width:100% !important;
}

#welcomeinfo {
    width:100% !important;
    padding:3px;
    font-size: 1.4em;
}

#welcomeinfo h2 {
    font-size:1.5em;
}

#welcomeinfo p {
    font-size:0.9em;
}

#newscontainer {
    width:100% !important;
}

#sidebar {
    width: 100% !important;
    text-align: left;
}

#sideads {
    display: none;
}

.sideaditem {
    display: none;
}

.newsitem {
    text-align:center;
    width:100% !important;
    float:none;
    height:auto;
    padding:5px;
}

#banner {
    display: none;
}

#bannercontainer {
    display: none;
}



#bannercontainer, #pagebannercontainer {
    display: none;
}


#caboose {
    width:100% !important;
}

#caboosecontainer {
    width:100% !important;
}

footer {
    width:100% !important;  
    padding: 0 5px;
}   

#footercontent {
    width:100% !important;

} 

.footercolumn {
    width:100% !important;
    background: none;
    margin-left: 0px;
    padding-left: 0px;
}

.narrowcontent, .widecontent {
    padding: 0;
    margin: 0;
}

#footerseal {
    width:320px;

}

#syrcopy {
    width: 320px;
    position: static;
    text-align: left;
}



}

plugins.js which contains the HoverIntent jquery plugin to get the nav working properly on desktop sites, but trying to cancel out the effects on mobile sites:

//topical menu
    var config = {
over: dropout, // function = onMouseOver callback (REQUIRED)
timeout: 400, // number = milliseconds delay before onMouseOut
out: dropin // function = onMouseOut callback (REQUIRED)
}; if ( $(window).width() > 739) {
$("#nav-topical li").hoverIntent(config); $("ul.dropdownnav li").hoverIntent(config); } else { //Add your javascript for small screens here if ($("#nav-topical li").hasClass('dropdownnav')) { $('ul.dropdownnav li').css('display', 'block'); } else {} }

We have a very customized set up and it can get confusing. I'm open to any ideas, even if it means rebuilding from scratch.

Thank you very much.

  1. 1 Posted by Penny on 22 Jul, 2015 01:02 PM

    Penny's Avatar

    Hi Nicole,

    I'd love to help come up with some ideas. The following are some sites that are responsive that handle multiple levels of navigation. I think in most cases they have the navigation for mobile and full site on the page loaded and just decide which to display based on the screen size.

    http://soka.edu/
    http://www.cau.edu/about/cau-history.html
    http://miamioh.edu/academics/majors-minors/index.html

    I'd strongly recommend coming up with the desired design and functionality of the menu first before you add the automation of it being powered by Cascade Server.

    Please let me know if I misunderstood the question or if you would like any further help or ideas. Thanks!

  2. Tim closed this discussion on 11 Aug, 2015 07:09 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac