Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Super Moderator vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,326
    Thanks
    3
    Thanked 43 Times in 43 Posts

    Problems making responsive navigation

    Just to give you a little background, I have a personal website that I developed a long time before mobile devices ever existed. Now I'm trying to rewrite the navigation menu utilizing HTML5, CSS3 and JQuery, and make it responsive while I'm at it. It's a work in progress. I'm doing this with a tutorial that I found online.

    I have a test page here. The menu functions well but I'm having problems with the styling when it displays on a mobile device. If you click on the Menu link, then click on the Music link for example, there is a nice border around all of those links. However, what I really want to have happen is for the entire menu to have that nice border around it when you click the Menu link. I'm having trouble figuring out how to do that.

    The following is the relevant code.

    CSS:
    Code:
    body, nav, ul, li, a  {margin: 0; padding: 0;}
    a {text-decoration: none;}
    .container {
        width: 90%;
        max-width: 900px;
        margin: 10px auto;
    }
    .toggleMenu {
        display:  none;
        padding: 10px 15px;
        color: #004080;
    	font-size: 12px;
    	font-weight: bold; 
    	text-decoration: none;
        z-index:200;
    }
    .nav {
        list-style: none;
         *zoom: 1;
        color: #004080;
    }
    .nav .mobile_parent {
        color: #004080;
        background: #fff;
        z-index:200;
        border: 1px solid #004080;
    }   
    .nav:before,
    .nav:after {
        content: " "; 
        display: table; 
    }
    .nav:after {
        clear: both;
    }
    .nav ul {
        list-style: none;
        width: 9em;
        color: #004080;
        border: 1px solid #004080;
    }
    .nav a {
        padding: 10px 15px;
        color: #004080;
    	font-size: 12px;
    	font-weight: bold; 
    	text-decoration: none;
    }
    .nav li {
        position: relative;
    }
    .nav > li {
        float: left;
    }
    .nav > li > .parent {
        background-image: url("/images/downArrow.png");
        background-repeat: no-repeat;
        background-position: right;
    }
    .nav > li > .mobile_parent {
        color: #004080;
        background: #fff;
        z-index:200;
        border: 1px solid #004080;
    }
    .nav > li > a {
        display: block;
    }
    .nav li  ul {
        position: absolute;
        left: -9999px;
        color: #fff;
        border: 1px solid #004080;
    }
    .nav > li.hover > ul {
        left: 0;
    }
    .nav li li.hover ul {
        left: 100%;
        top: 0;
    }
    .nav li li a {
        display: block;
        color: #004080;
        background: #fff;
        position: relative;
        z-index:100;
    }
    .nav li li li a {
        color: #004080;
        background: #fff;
        z-index:200;
    }
    
    @media screen and (max-width: 768px) {
        .active {
            display: block;
        }
        .nav > li {
            float: none;
        }
        .nav > li > .parent {
            background-position: 95% 50%;
            color: #004080;
            background: #fff;
        }
        .nav > li > .mobile_parent {
            color: #004080;
            background: #fff;
            z-index:200;
           border: 1px solid #004080; 
        }
        .nav li li .parent {
            background-image: url("/images/downArrow.png");
            background-repeat: no-repeat;
            background-position: 95% 50%;
            color: #004080;
            background: #fff;
        }
        .nav li li .mobile_parent {
            color: #004080;
            background: #fff;
            z-index:200;
            border: 1px solid #004080;
        }
        .nav ul {
            display: block;
            width: 100%;
        }
       .nav > li.hover > ul , .nav li li.hover ul {
            position: static;
        }
    
    }
    Navigation Menu HTML:
    Code:
    <div id="banner">
        <div id="nav_strip">
    		<div class="container">
        <a class="toggleMenu" href="#">Menu</a>
        <ul class="nav">
    			<li>
    				<a href="/">Home</a>
    			</li>
    			<li>
    				<a href="/sitemap.php">Site Map</a>
    			</li>
    			<li>
    				<a href="#">Search</a>
    				<ul>
    					<li><a href="/sphider/search.php">Search My Website</a></li>
    					<li><a href="/MusicDBSearch.php">Search My Music Database</a></li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">Music</a>
    				<ul>
    					 <li><a class="nohref">My Collection</a>
    					 	<ul>
    							<li><a href="/MusicIntro.php">Introduction</a></li>
    							<li><a href="/MyCollection1.php">Complete Collection</a></li>
    							<li><a href="/dvd1.php">My Music DVD Collection</a></li>
    							<li><a href="/NewArrivals1.php">New Arrivals</a></li>
    							<li><a href="/BeeGees1.php">The Bee Gees &amp; Related</a></li>
    							<li><a href="/Blues1.php">Blues</a></li>
    							<li><a href="/Corrs1.php">The Corrs &amp; Related</a></li>
    							<li><a href="/Country1.php">Country &amp; Country-Rock</a></li>
    							<li><a href="/EasyListening1.php">Easy Listening</a></li>
    							<li><a href="/Folk1.php">Folk &amp; Folk-Rock</a></li>
    							<li><a href="/Jazz1.php">Jazz &amp; Big Band</a></li>
    							<li><a href="/Miscellaneous1.php">Miscellaneous</a></li>
    							<li><a href="/Reggae1.php">Reggae</a></li>
    							<li><a href="/Rock1.php">Rock</a></li>
    							<li><a href="/SavageGarden1.php">Savage Garden &amp; Related</a></li>
    						</ul>
    					</li>
    					<li><a class="nohref">Trading Music</a>
    						<ul>
    							<li><a href="/TradeList1.php">Complete Trade List</a></li>
    							<li><a href="/TradeListBeeGees1.php">Bee Gees Trade List</a></li>
    							<li><a href="/WantList.php">Want List</a></li>
    							<li><a href="/BadTrader.php">Bad Trader List</a></li>
    						</ul>
    					</li>
    					<li><a class="nohref">Vinyl Restoration</a>
    						<ul>
    							<li><a href="/LPtoCD.php">LP to CD: Turning Vinyl Into Digital Gold *</a></li>
    							<li><a href="http://www.a-reny.com/iexplorer/restauration.html">Restoring Old Vinyl: Allen Reny's Website</a></li>
    							<li><a href="http://www.blazeaudio.com/" id="blaze_audio">Blaze Audio Software</a></li>
    							<li><a href="https://groups.yahoo.com/group/TheVinylSolutionDiscussionGroup/" id="vinyl">The Vinyl Solution Discussion Group</a></li>
    						</ul>
    					</li>
    					<li><a class="nohref">Album Reviews</a>
    						<ul>
    							<li><a href="/ABeeGeesChristmas.php">A Bee Gees Christmas</a></li>
    							<li><a href="/BeeGeeTastic.php">BeeGeeTastic</a></li>
    							<li><a href="/KerrvilleEarlyYearsReview.php">The Early Years: Kerrville Folk Festival 1972-1981</a></li>
    							<li><a href="/GottaGetReview.php">Gotta Get A Message To You Tribute Album</a></li>
    							<li><a href="/ThreeBees.php">The Three Bees</a></li>
    							<li><a href="/WallsHaveEyes.php">Walls Have Eyes</a></li>
    							<li><a href="/WeLoveTheBeeGees.php">We Love The Bee Gees</a></li>
    						</ul>
    					</li>
    					<li><a class="nohref">Music Articles</a>
    						<ul>
    							<li><a href="/BillsRecordsArticle.php">Bill's Records: Dallas' Best Kept Secret *</a></li>
    							<li><a href="/IStartedAJoke.php">I Started A Joke: An Interpretive Study</a></li>
    							<li><a href="/JohnnyGimbleConcert.php">Johnny Gimble Concert: Spring 2002</a></li>
    							<li><a href="/LPtoCD.php">LP to CD: Turning Vinyl Into Digital Gold *</a></li>
    							<li><a href="/CliveAnderson.php">Maurice Gibb Discusses That Clive Anderson Show</a></li>
    							<li><a href="/RustyWier.php">Rusty Wier: His Music and Where To Buy It</a></li>
    							<li><a href="/InternetCollecting.php">Using The Internet To Further Collecting Efforts</a></li>
    							<li><a class="nohref">* indicates published article</a></li>
    						</ul>
    					</li>
    					<li><a class="nohref">B. W. Stevenson</a>
    						<ul>
    							<li><a href="/BWStevenson.php">B. W. Stevenson: His Music and Where To Buy It</a></li>
    							<li><a href="/BWStevensonOnRhino.php">Let's Get B. W. Stevenson Released On CD</a></li>
    							<li><a href="/BW-Lyrics.php">B. W. Stevenson Lyrics</a></li>
    							<li><a href="http://www.pmblonestarlady.com/bws.html">B. W. Stevenson Memorial &amp; Collecting Site</a></li>
    							<li><a class="nohref">Hugh's B. W. Pages</a>
    								<ul>
    									<li><a href="/BWStevenson/bw_intro.php">Hugh's B. W. Pages: Introduction</a></li>
    									<li><a href="/BWStevenson/bw_page_1.php">In Honor Of B. W. Stevenson</a></li>
    									<li><a href="/BWStevenson/bw_discography.php">B. W. Stevenson Discography</a></li>
    									<li><a href="/BWStevenson/bw_memories.php">B. W. Fan Memories: Page 1</a></li>
    									<li><a href="/BWStevenson/bw_memories2.php">B. W. Fan Memories: Page 2</a></li>
    									<li><a href="/BWStevenson/bw_memories3.php">B. W. Fan Memories: Page 3</a></li>
    									<li><a href="/BWStevenson/bw_tv.php">B. W. TV Appearances</a></li>
    								</ul>
    							</li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<li>
    				<a href="#">Miscellaneous</a>
    				<ul>
    					<li><a href="https://www.facebook.com/patricia.boganwong?sk=wall" title="Pat Wong Facebook page">Facebook</a></li>
    					<li>
              <a class="nohref">Family</a>
    						<ul>
    							<li><a href="/1219AshlandIntro.php">1219 Ashland - Introduction</a></li>
    							<li><a href="/1219AshlandSlideShow.php">1219 Ashland - Slide Show</a></li>
    							<li><a href="/BeeGeesMobile.php">The BeeGeesMobile</a></li>
    							<li><a href="/BoganReunion2003SlideShow.php">Bogan Family Reunion 2003 - Slide Show</a></li>
    							<li><a href="/EstherEscortToHeaven.php">Esther's Escort to Heaven</a></li>
    							<li><a href="/MeAtWork.php">Me At Work</a></li>
    							<li><a href="/RekkidRoom.php">The Rekkid Room</a></li>
    							<li><a href="/WongFamily.php">The Wong Family</a></li>
    							<li><a href="/Wonglets.php">The Wonglets</a></li>
    						</ul>
    					</li>
    					<li><a class="nohref">Pictures</a>
    						<ul>
    							<li><a href="/BillsRecordsSlideShow.php">Bill's Records Article - Slide Show</a></li>
    							<li><a href="/JohnnyGimbleSlideShow.php">Johnny Gimble Concert - Slide Show</a></li>
    						</ul>
    					</li>
    					<li><a class="nohref">Software Reviews</a>
    						<ul>
    							<li><a href="/CDTrusteeReview.php" id="cdtrustee_review">CD Trustee</a></li>
    						</ul>
    					</li>
    					<li><a class="nohref">Cool Links</a>
    						<ul>
    							<li><a href="http://www.goldminemag.com/" id="goldmine">Goldmine Magazine</a></li>
    							<li><a href="http://txmusic.com/" id="txmusic">Texas Music Magazine</a></li>
    							<li><a href="http://www.musicstack.com/" id="musicstack">MusicStack.com</a></li>
    							<li><a href="http://www.spayneuterallpets.org/" id="snap">SNAP</a></li>
    						</ul>
    					</li>
    				</ul>
    			</li>
    			<li>
    				<a href="/FAQ.php" id="faq">FAQ</a>
    			</li>
    			<li>
    				<a href="#" id="bookmark">Bookmark My Site</a>
    			</li>
    			<li>
    				<a href="/ContactMe.php" id="contact">Contact</a>
    			</li>
    		</ul>
      </div>
    	</div>
    JQuery Script:
    Code:
    var ww = document.body.clientWidth;
    
    $(document).ready(function() {
    	$(".nav li a").each(function() {
    		if ($(this).next().length > 0) {
    		    $(this).addClass("parent");
    		};
    	})
    	
    	$(".toggleMenu").click(function(e) {
    		e.preventDefault();
    		$(this).toggleClass("active");
    		$(".nav").toggle();
    	});
    	adjustMenu();
    })
    
    $(window).bind('resize orientationchange', function() {
    	ww = document.body.clientWidth;
    	adjustMenu();
    });
    
    var adjustMenu = function () {
        if (ww < 768) {
            $(".toggleMenu").css("display", "inline-block");
            if (!$(".toggleMenu").hasClass("active")) {
                $(".nav").hide();
            } else {
                $(".nav").show();
            }
            $(".nav > li").addClass(".mobile_parent");
            $(".nav li li").addClass(".mobile_parent");
            $(".nav li").unbind('mouseenter mouseleave');
            $(".nav li a.parent").unbind('click').bind('click', function (e) {
                // must be attached to anchor element to prevent bubbling
                e.preventDefault();
                $(this).parent("li").toggleClass("hover");
            });
        }
        else if (ww >= 768) {
            $(".toggleMenu").css("display", "none");
            $(".nav").show();
            $(".nav > li").removeClass(".mobile_parent");
            $(".nav li li").removeClass(".mobile_parent");
            $(".nav li").removeClass("hover");
            $(".nav li a").unbind('click');
            $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function () {
                // must be attached to li so that mouseleave is not triggered when hover over submenu
                $(this).toggleClass('hover');
            });
        }
    }
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!

  2. #2
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    2,323
    Thanks
    2
    Thanked 334 Times in 324 Posts
    Step 1) STOP USING JAVASCRIPT. It's automatically inaccessible, and one of the entire points of responsive design is ACCESSIBILITY. Dropdown/flyout menus using JavaScript have ALWAYS been nonsensical garbage, and hasn't been something you even NEED JavaScript to do for over a decade unless you need a .htc to give IE6/earlier support. ...and literally for IE6/learlier that's a behavior file's job!

    Step 2) STOP making such massively un-navigable menus and switch the site to drill-down navigation. You're pushing "link overload" on users to the point you have so many links on the page, it becomes exponentially more difficult to find what you are looking for. Pretty much from the moment you hit that second level of depth, you're just making the site harder to use.

    You've got a double whammy of how NOT to build a website if you plan on being mobile friendly or accessibility minded.
    Last edited by deathshadow; 10-12-2017 at 11:42 PM.
    I would rather have questions that can't be answered, than answers that can't be questioned.
    http://www.cutcodedown.com

  3. #3
    Super Moderator vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,326
    Thanks
    3
    Thanked 43 Times in 43 Posts
    Thanks for your reply, deathshadow.

    I guess we'll just have to disagree about navigation menus that use javascript. My original menu, as it currently exists, functions just fine even when javascript is disabled; I made sure of that when I designed it. The only thing that it could arguably do better is to hide/show specific subcategories in the second menu level and beyond. The new navigation menu that I'm trying to make work would do just that. No link overload.

    Do you have any suggestions for a tutorial that I could use to start over? I would like for the menu to display horizontally on a PC and vertically on a smartphone or tablet. I am certainly open to options other than the one I'm trying to get to display the way I want it.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!

  4. #4
    Super Moderator vinyl-junkie's Avatar
    Join Date
    Jun 2003
    Posts
    3,326
    Thanks
    3
    Thanked 43 Times in 43 Posts
    Solved it!

    Instead of this at the top of the navigation menu:
    Code:
    <div id="banner">
        <div id="nav_strip">
    		<div class="container">
        <a class="toggleMenu" href="#">Menu</a>
        <ul class="nav">
    			<li>
    I added a div between the toggleMenu and the unordered list, like so:
    Code:
    <div id="banner">
        <div id="nav_strip">
    		<div class="container">
        <a class="toggleMenu" href="#">Menu</a>
        <div class="mobile_container">
        <ul class="nav">
    			<li>
    The closing div is just after the last closing </ul> in the navigation menu.

    Then I changed the media query for mobile from this:
    Code:
    @media screen and (max-width: 768px) {
        .active {
            display: block;
        }
        .nav > li {
            float: none;
        }
        .nav > li > .parent {
            background-position: 95% 50%;
            color: #004080;
            background: #fff;
        }
        .nav > li > .mobile_parent {
            color: #004080;
            background: #fff;
            z-index:200;
           border: 1px solid #004080; 
        }
        .nav li li .parent {
            background-image: url("/images/downArrow.png");
            background-repeat: no-repeat;
            background-position: 95% 50%;
            color: #004080;
            background: #fff;
        }
        .nav li li .mobile_parent {
            color: #004080;
            background: #fff;
            z-index:200;
            border: 1px solid #004080;
        }
        .nav ul {
            display: block;
            width: 100%;
        }
       .nav > li.hover > ul , .nav li li.hover ul {
            position: static;
        }
    }
    to this:
    Code:
    @media screen and (max-width: 768px) {
        .active {
            display: block;
        }
        .nav > li {
            float: none;
        }
        .nav > li > .parent {
            background-position: 95% 50%;
            color: #004080;
            background: #fff;
        }
        .nav > li > .mobile_parent {
            color: #004080;
            background: #fff;
            z-index:200;
           border: 1px solid #004080; 
        }
        .nav li li .parent {
            background-image: url("/images/downArrow.png");
            background-repeat: no-repeat;
            background-position: 95% 50%;
            color: #004080;
            background: #fff;
        }
        .nav li li .mobile_parent {
            color: #004080;
            background: #fff;
            z-index:200;
            border: 1px solid #004080;
        }
        .nav ul {
            display: block;
            width: 100%;
        }
       .nav > li.hover > ul , .nav li li.hover ul {
            position: static;
        }
        .mobile_container {
            background: #fff;
            z-index:200;
            border: 1px solid #004080;
        }
    }
    I don't know why I didn't think of it earlier. I kept trying to mess with the JQuery code, which just wasn't cutting it.
    Music Around The World - Collecting tips, trade
    and want lists, album reviews, & more
    SNAP to it!


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •