ThemeShaper Forums » Thematic

[closed]

Responsive Menu

(34 posts)
  • Started 6 years ago by bogh
  • Latest reply from bogh
  • This topic is not resolved
  1. bogh
    Member

    I am trying to make my themes responsive, and now I am at the menu part.
    So what I am trying to achieve is a menu that becomes a button when on small resolutions.

    If someone know how this could be accomplished would be really nice, or at least show me a plugin that can do that, maybe I can adapt it to thematic child themes.

    Here are some examples: http://themefit.com and http://www.ejhansel.com/
    (*resize the browser to see how the menu becomes at low resolutions)

    Thanks

    Posted 6 years ago #
  2. bogh
    Member

    I need help and ideeas for this please :D
    In the end it could be an interesting tutorial.

    Posted 6 years ago #
  3. bogh
    Member

    I have done something, and it kind of works, but is definetely far from perfect.
    So I would appreciate if someone can improve the JS of this one.

    function child_thematic_access() { ?>
    	    <div id="access">
                <a class="nav-toggle" href="#">Navigation</a>
    	    	<?php
    	    	if ((function_exists("has_nav_menu")) && (has_nav_menu(apply_filters('thematic_primary_menu_id', 'primary-menu')))) {
    	    		echo  wp_nav_menu(thematic_nav_menu_args());
        		} else {
        			echo  thematic_add_menuclass(wp_page_menu(thematic_page_menu_args()));
        		}
    	    	?>
    		</div><!-- #access -->
    
    		<?php }
    
    function call_scripts() { ?>
    <script>
    	jQuery(document).ready(function($) {
    		$('.nav-toggle').click(function() {
    			$('#access .menu ul').slideToggle(250);
    			return false;
    		});
    		if( ($(window).width() > 640) || ($(document).width() > 640) ) {
    
    				$('#access li').mouseenter(function() {
    					$(this).children('ul').css('display', 'none').stop(true, true).slideToggle(250).css('display', 'block').children('ul').css('display', 'none');
    				});
    				$('#access li').mouseleave(function() {
    					$(this).children('ul').stop(true, true).fadeOut(250).css('display', 'block');
    				})
    
    		}}
    );
    </script>
    <?php
    }
    add_action('wp_head', 'call_scripts');

    Let me know if you need the CSS too.
    Thanks

    Posted 6 years ago #
  4. the one at themefit is quite nice. i'll have to remember that one. in a general overview kind of way, it looks like they are generating the menu twice in the markup (or creating the select on-the-fly) and then hiding/displaying the appropriate one with CSS. the mobile menu just looks like a well-styled jquery select list. there are some good tuts out there on that if you google around.

    i'm usually opposed to dropdown menus, but i wonder how it'd handle a second level of items.

    this is something that is next on my agenda. i have done this:

    http://www.chicagointerhandball.com/

    which converts the regular menu to a simple select list... on the fly. (well the list is created w/ js and then display/hidden w/ css media queries) what i need to do next is style the list.

    here's the code i used, found somewhere on the interwebs:

    jQuery(document).ready(function($) {
       //create a drop down menu from UL menu
    	var list = $(document.createElement('select')).attr({id:'mobilemenu',name:'mobilemenu'});
    
    	var menu = $('#access .menu');
    	var url = window.location.href;
    
    	$('.menu li').each(function() {
    		var option = $('<option>').val( $('a',this).attr('href')).text($(this).text()).appendTo(list);
    		if ( option.val().toLowerCase() == url.toLowerCase() ) {
    			option.attr('selected', true);
    		}
    	});
    
    	list.prepend('<option val="">Main Menu</option>').appendTo($('#access')).change(function () {
    		var href = $('option:selected', this).val().toLowerCase();
    			if(href){
    				window.location = href;
    			}
    	}).wrap('<div id="mobilemenucontainer" data-role="fieldcontain"/>');
    });
    Posted 6 years ago #
  5. bogh
    Member

    I am trying to avoid this option you shown, and to get closer to the ones on those sites.

    It's so annoying when I want to achieve something and I don't know JS :))
    But, I am getting closer though, I will not rest until I don't have the perfect responsive menu, like on themefit.com :D

    Please let me know if you have more ideas.

    Posted 6 years ago #
  6. i've been working on this today. it wasn't that hard.... just a little jquery slideToggle action. styling it to look sharp is taking me forever, of course.

    see this tut:
    http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial

    and i'll post again when i've finished updating the handball site w/ its new menu look

    Posted 6 years ago #
  7. check out the menu now:
    http://www.chicagointerhandball.com/

    got a few other unrelated problems to work out. but i just followed the tutorial. you might want to give the menu and it's container an id:

    //Update Menu Arguments - i am limiting the depth to 1 until i figure out how to handle sub menus
    function child_nav_args($args){
    
    		$my_args = array ( 'depth' => 1,
    				'menu_id' => 'primary-menu',
    				'menu_class'      => 'hover sf-menu',
    				 'container_id' => 'primary-menu-container'
    		);
    		$args = array_merge($args,$my_args);
    
    		return $args;
    	}
    add_filter('thematic_nav_menu_args','child_nav_args');

    the pertinent js:

    /* prepend menu icon */
        $('#primary-menu-container').prepend('<div id="menu-icon">Menu</div>');
    
        /* toggle nav */
        $("#menu-icon").on("click", function () {
            $("#primary-menu").slideToggle();
            $(this).toggleClass("active");
        });

    then it is just a matter of styling the 2 menus differently. but at a base you will need:

    #primary-menu { display: none; margin-bottom: 10px;}	
    
    @media only screen and (min-width: 768px) {
    	#primary-menu { display: block !important; }
            #menu-icon {display: none;}
    }
    Posted 6 years ago #
  8. I am scratching my head wondering why the current Thematic can't just be slowly converted to html5 but quickly converted to be responsive design friendly...the former does not seem necessary, while the latter seems quite necessary and would help keep people using Thematic for the short term at least...thoughts?

    Posted 6 years ago #
  9. there's no reason you can't be responsive w/ thematic right now.

    i got something started here:
    https://github.com/helgatheviking/thematic-adaptive

    would love any help you want to give to improve it.

    Posted 6 years ago #
  10. k, ima fork it and look into it. Do you think including a default script to minify the menu would be doable?

    Posted 6 years ago #
  11. Note: I'm gonna mod the Acamas child theme to include the flexslider and a responsive layout. Check out http://jagst3r15.com on http://www.responsinator.com/ for some progress on it...very busy this week so won't get too much done (only have an unresponsive slider in there right now)

    Using helga's adaptive css layouts btw

    Posted 6 years ago #
  12. bogh
    Member

    Can you please tell me if it is possible to remove the sf-menu class without deactivating the JS of the menu. Something with JS would be nice.

    I have almost finished this responsive menu, but I can't manage how to do the thing I told you above. I need to remove it because I don't want all the styles of the sf-menu to be inherited to the menu that appears on small resolutions.

    Posted 6 years ago #
  13. bogh
    Member

    Or better tell me how I can remove the JS of the menu without removing it's classes, because I have another ideea.

    I have tried to edit the functions of the superfish:

    if ( pixy_container_width <= 800 ){
    	$pixy_nav.addClass('mobile_nav').find('> ul').removeClass('nav');
    	$pixy_nav.addClass('mobile_nav').find('> ul').superfish({
    	delay:       false,                               // delay on mouseout
    	animation:   false,    // fade-in and slide-down animation
    	speed:       false,                            // faster animation speed
    	autoArrows:  false,                             // enable generation of arrow mark-up
    	dropShadows: false                              // disable drop shadows
    	});
    }

    The 'ul' is the 'sf-menu', the 'nav' is a new class I have added to the 'ul', but I don't think this is important.
    Please help me make this work :)

    I want to remove at least the animation. Because on mobile I want the submenus to be shown without hovering, so I have done that, but when I hover on a 'li.sfHover' it shows that animation, and it's annoying.

    Posted 6 years ago #
  14. i already showed you how to modify the class... its in my child_nav_args() function a few posts back.

    if you don't want those styles, then just remove the styles from CSS. if you remove the class, but leave the styles that's just bloating your stylesheet.

    read my menu thread for how to remove all dropdown scripts. it's stickied on the front page.

    getting some other jquery plugin to work for you really goes beyond the scope of this forum.

    Posted 6 years ago #
  15. bogh
    Member

    You understood me wrong I guess, because I've added the class I wanted, I haven't asked for that. Sorry for not being more specific.

    I have done the menu as I wanted, almost as on themefit.com, without duplicating the menu.

    I think is almost perfect, except that animation on the dropdowns. But I should make a better reasearch, if you say my answer is somewhere then I will find it :D

    Thank you for your help.

    P.S.: I am trying to make this responsive menu for thematic, so I suppose it could be the scope of this forum, or am I wrong? ... And when it is finished I will post everything here, maybe it helps other too :)

    Posted 6 years ago #
  16. removing the superfish scripts (which then you won't have animated dropdowns on desktops) can be found here

    http://forums.themeshaper.com/topic/thematic-menus-demystified-1#post-15284

    though i have to admit that is now a bit outdated... the header scripts are going through a major overhaul in the current SVN version. so i'd recommend using

    function childtheme_override_head_scripts(){
       // Abscence makes the heart grow fonder
    }

    that should work w/ both the current stable version and whenever gene comes out of hiding the version we udpated gets pushed live.

    in the future you'll be able to just remove the action from its hook, but not atm.

    as pertains to scope, but just b/c one is using thematic does automatically make everything one does with wordpress or jquery automatically a thematic issue. but i misunderstood your request and removing the superfish scripts from the header is indeed a thematic question... with the answer above.

    Posted 6 years ago #
  17. Hey guys, take a look at http://www.jagst3r15.com ... made some progress with a responsive design. Here's what I gotta fix:

      The slider is still really wacky
      I need to implement the toggle effect for the nav at smaller widths
      The primary and secondary menus get messed up and aren't centered properly when the screen is made smaller
      The title gets messed up when smaller too

    helga, btw I don't think the 1140px width for a basic thematic layout...I am gonna make some layouts for the good old 940/960ish px range since I think it preserves the integrity of the thematic layout more. I'll email them to you if you wanna put em on git.

    Let me know what you think so far.

    Posted 6 years ago #
  18. if you're in my thematic adaptive github, then don't forget to check out the 978gs. it more closely" mirrors the "integrity of the thematic layout"... just with a little more breathing room. i don't really like the fluid grids anyway.

    Posted 6 years ago #
  19. raora
    Member

    Have you looked at Thematic 320? Link: http://www.ejhansel.com/thematic-320-and-up-update-a-responsive-wordpress-child-theme/

    Posted 6 years ago #
  20. Yep, I have looked at that, but I didn't like how the styles were put in and it seemed to be a very large file and could use some slimming down. I think there's a version 2 of the 320 and up framework thingy out as well. I think it would be a good idea to update and use, but honestly helga's adaptive styles are awesome. I mean, they aren't the best for mobile devices, but they are an awesome solution for tablets and for reading when you have 2 windows open, etc.

    @helga, what do you mean you don't like the fluid layouts?

    Posted 6 years ago #
  21. i mean i don't like percentage widths... so that the line length changes as you resize the browser. i love responsive layouts and need to do more of them.

    i'm not sure what you mean about the 320 stylesheet being kind of large b/c i haven't looked at it in a long time. the stylesheet can get large, but i think it is better (and i do it in practice) to paste all the @imports into style.css instead of having to make more "round trips" to download things. it might also have added a lot of stuff from the html boilerplate. if anything i need to apply the mobile-first approach taken in 320and up to my adaptive layouts. i've been doing that more in reality, but haven't updated my thematic sheets.

    my stylesheets are defo not the best for handling the menu. i'm not sure there is a 100% standard for handling this.

    Posted 6 years ago #
  22. Sorry. I just meant that the 320 and up framework seems a bit large and is a bit too complex to just mess around with; using the media queries as you do in the adaptive styles seems easier. I think we should to try and bundle them in a theme along with some JS to address menu and image re-sizing.

    Posted 6 years ago #
  23. they use media queries too... so i'm not sure what you're finding confusing to offer any advice. oh well. would love to see a really sharp menu design in a future version of thematic.

    Posted 6 years ago #
  24. He uses html5 so maybe I am just getting confused with the conversions going on in there (even though it's really just faking html5, so to speak). I'm trying to say we make one using the current thematic markup since it's really still valid and is less confusing to me at least

    Posted 6 years ago #
  25. bogh
    Member

    Can someone tell me how/where is the width of a drop-down menu generated, I mean when the text of an item exceeds the default min-width of 12em.

    Thanks.

    Posted 6 years ago #
  26. @bogh your question has nothing to do with the topic of this thread.

    Posted 6 years ago #
  27. bogh
    Member

    I think it does a bit. I am trying to make a thematic responsive menu, and I am having some issues with the supersubs, because it does not autogenerates the width of the dropdown menus when the text exceeds 12em, this happens when I resize my browser, due to the js for the responsive menu I have done.
    So I was wondering how is that width autogenerated, maybe I can fix this issue with my responsive menu. But if it is not a Thematic thing I will be looking for an answer somewhere else, no worries.

    Thank you.

    Posted 6 years ago #
  28. The file that inserts the 12em is thematic-dropdowns.js

    It is inserted by jquery on the fly

    Posted 6 years ago #
  29. bogh
    Member

    I know how is 12em inserted, and which file, what I don't understand is how is the width autogenerated in case the text exceeds 12em.

    Thanks anyway.

    Posted 6 years ago #
  30. bogh
    Member

    See a screenshot with my responsive menu here: http://i39.tinypic.com/15i20ow.png

    For those who want to try my responsive menu follow the steps:

    1. In your Thematic Child Theme create a folder called "js" and add a JS file, with the name "responsive.menu.js" and add the following code:

    (function($) {
    	$.fn.pixyResponsiveMenu = function(options) {
                var $pixy_mobile_nav_button = $('#mobile_nav'),
    				$pixy_mobile_nav_button_close = $('#mobile_nav_close'),
    				$pixy_nav = $('.menu'),
    				pixy_container_width = jQuery(window).width() || jQuery(document).width();
    
    			if ( pixy_container_width <= 800 ){
    				$pixy_nav.addClass('mobile_nav').find('> ul').removeClass('nav');
    			}
    
    			$(window).resize( function(){
    				if ( pixy_container_width != jQuery(window).width() || jQuery(document).width() ) {
    					pixy_container_width = jQuery(window).width() || jQuery(document).width();
    					if ( pixy_container_width <= 800 ){
    						$pixy_nav.addClass('mobile_nav').find('> ul').addClass('sf-menu_mobile').removeClass('nav').css({ 'display' : 'none', 'opacity' : '0', 'height' : '0' }).superfish({ delay: 400, animation: {opacity: 1}, speed: 'fast', autoArrows: false, dropShadows: false });
    						$pixy_mobile_nav_button.removeClass( 'opened' ).addClass( 'closed' );
    						$pixy_mobile_nav_button_close.removeClass( 'opened' ).addClass( 'closed' );
    					}
    					else {
    						$pixy_nav.removeClass('mobile_nav').find('> ul').removeClass('sf-menu_mobile').addClass('nav').css({ 'display' : 'inline-block', 'opacity' : '1', 'height' : '100%' }).supersubs({ minWidth: 12, maxWidth: 27, extraWidth: 1 }).superfish({ delay: 400, animation: {opacity:'show',height:'show'}, speed: 'fast', autoArrows: false, dropShadows: false });
    					}
    				}
    			});
    			$pixy_mobile_nav_button.click( function(){
    				if ( $(this).hasClass('closed') ){
    					$(this).removeClass( 'closed' ).addClass( 'opened' );
    					$pixy_mobile_nav_button_close.removeClass( 'closed' ).addClass( 'opened' );
    					$pixy_nav.find('> ul').css({ opacity : 0, 'display' : 'inline-block', height : 0 }).animate( { opacity: 1, height: '100%' }, 500 ).superfish({ delay: 400, animation: {opacity: 1}, speed: 'fast', autoArrows: false, dropShadows: false });
    				} else {
    					$(this).removeClass( 'opened' ).addClass( 'closed' );
    					$pixy_mobile_nav_button_close.removeClass( 'opened' ).addClass( 'closed' );
    					$pixy_nav.find('> ul').animate( { opacity: 0, height: 0 }, 500, function(){
    						$(this).css( { 'display' : 'none' } );
    					}).supersubs({ minWidth: 12, maxWidth: 27, extraWidth: 1 }).superfish({ delay: 400, animation: {opacity:'show',height:'show'}, speed: 'fast', autoArrows: false, dropShadows: false });
    				}
    				return false;
    			});
    			$pixy_mobile_nav_button_close.click( function(){
    				if ( $(this).hasClass('closed') ){
    					$(this).removeClass( 'closed' ).addClass( 'opened' );
    					$pixy_nav.find('> ul').css({ opacity : 0, 'display' : 'inline-block', height : 0 }).animate( { opacity: 1, height: '100%' }, 500 ).superfish({ delay: 400, animation: {opacity: 1}, speed: 'fast', autoArrows: false, dropShadows: false });
    				} else {
    					$(this).removeClass( 'opened' ).addClass( 'closed' );
    					$pixy_mobile_nav_button.removeClass( 'opened' ).addClass( 'closed' );
    					$pixy_nav.find('> ul').animate( { opacity: 0, height: 0 }, 500, function(){
    						$(this).css( { 'display' : 'none' } );
    					}).supersubs({ minWidth: 12, maxWidth: 27, extraWidth: 1 }).superfish({ delay: 400, animation: {opacity:'show',height:'show'}, speed: 'fast', autoArrows: false, dropShadows: false });
    				}
    				return false;
    			});
    	}
    })(jQuery);

    2. Add this into functions.php:

    function remove_menu() {
    	remove_action('thematic_header','thematic_access',9);
    }
    add_action('init', 'remove_menu');
    
    // Moving the thematic menu
    add_action('thematic_header','child_thematic_access',10);
    
    function child_thematic_access() { ?>
    	    <div id="access">
                <div id="mobile_menu">
    					<a href="#" id="mobile_nav" class="closed"><?php _e( 'Navigation Menu', 'thematic' ); ?><span></span></a>
                        <a href="#" id="mobile_nav_close" class="closed"><?php _e( 'x', 'thematic' ); ?><span></span></a>
    			</div>
    	    	<?php
    			$menuClass = 'nav';
    	    	if ((function_exists("has_nav_menu")) && (has_nav_menu(apply_filters('thematic_primary_menu_id', 'primary-menu')))) {
    	    		echo  wp_nav_menu(thematic_nav_menu_args());
        		} else {
        			echo  thematic_add_menuclass(wp_page_menu(thematic_page_menu_args()));
        		}
    	    	?>
    		</div><!-- #access -->
    <?php }
    
    function pixy_enqueue_scripts() {
    	wp_enqueue_script('pixyResponsiveMenu', get_stylesheet_directory_uri() . 'js/responsive.menu.js', array('jquery'), true);
    }
    add_action('wp_enqueue_scripts', 'pixy_enqueue_scripts');
    
    function pixy_add_js_to_head() {
    	?>
            <meta name="viewport" content="width=device-width; initial-scale=1.0">
    	<script type='text/javascript'>
            jQuery(document).ready(function($) {
    			$('#access').pixyResponsiveMenu();
            });
            </script>
    	<?php
    }
    add_action('wp_head', 'pixy_add_js_to_head');

    3. Into style.css paste this:

    /* =pixyMenu Responsive
    -------------------------------------------------------------- */
    #mobile_menu {
    	width: 300px;
    	margin: 0px auto;
    	display: none;
    	text-align: center;
    }
    #mobile_nav {
    	position: relative;
    	z-index: 1;
    	display: block;
    	margin: 0px -10px;
    	line-height: 40px;
    	color: #999;
    	font-weight: bold;
    	font-size: 20px;
    	text-shadow: 1px 1px 0px #FFF;
    	text-decoration: none;
    	border: 1px solid #CCC;
    	background: #F2F2F2;
    	-webkit-border-radius: 5px;
    	-moz-border-radius: 5px;
    	border-radius: 5px;
    	-webkit-box-shadow: 0px 0px 5px 1px #000;
    	-moz-box-shadow: 0px 0px 5px 1px #000;
    	box-shadow: 0px 0px 5px 1px #000;
    }
    #mobile_nav.closed {
    	/*You can add a different style
    	for the options "opened" & "closed" */
    }
    #mobile_nav.closed:hover {
    	border: 1px solid #DDD;
    	border-bottom: 1px solid #BBB;
    }
    #mobile_nav.opened {
    	/*You can add a different style
    	for the options "opened" & "closed" */
    }
    #mobile_nav span {
    	display: block;
    	position: absolute;
    	top: 9px;
    	left: 10px;
    	background: url(images/nav_menu_plus.png) no-repeat;
    	width: 9px;
    	height: 10px;
    }
    #main_nav {
    	position: relative;
    }
    #mobile_nav_close {
    	position: absolute;
    	z-index: 1;
    	bottom: -23px;
    	margin-left: 10px;
    	text-shadow: 1px 1px #FFE0CE;
    	background: #FFC19C;
    	border: 1px solid #FF8339;
    	border-top: none;
    	color: #BF4B06;
    	font: bold 18px/22px Arial, sans-serif !important;
    	text-decoration: none;
    	padding: 0px 10px;
    	-webkit-border-radius: 0px 0px 5px 5px;
    	-moz-border-radius: 0px 0px 5px 5px;
    	border-radius: 0px 0px 5px 5px;
    }
    #mobile_nav_close.closed {
    	display: none;
    }
    #mobile_nav_close.opened {
    	display: block;
    }
    .menu.mobile_nav {
    	background: none;
    	position: relative;
    	top: 0px;
    }
    .menu.mobile_nav > ul {
    	width: 300px;
    	margin: 0px auto;
    	padding: 0px;
    	display: none;
    	text-align: left;
    	border: 1px solid #CCC;
    	border-bottom: 2px solid #AAA;
    	border-top: none;
    	background: #F2F2F2;
    	-webkit-border-radius: 0px 0px 5px 5px;
    	-moz-border-radius: 0px 0px 5px 5px;
    	border-radius: 0px 0px 5px 5px;
    }
    .menu.mobile_nav > ul > li > a {
    	background: none !important;
    }
    .menu.mobile_nav > ul > li > ul {
    	border-top: 1px solid #FFF;
    	border-bottom: 1px solid #CCC;
    }
    .menu.mobile_nav li {
    	float: none;
    	list-style: none;
    	background: none !important;
    	padding: 0px !important;
    	margin: 0px !important;
    }
    .menu.mobile_nav li a {
    	color: #777;
    	text-shadow: 1px 1px 0px #FFF;
    	font-size: 14px;
    	font-weight: bold;
    	display: block;
    	padding: 10px 10px;
    	margin: 0px;
    	width: auto;
    	float: none;
    	text-decoration: none !important;
    }
    .menu.mobile_nav li a:hover {
    	color: #555;
    }
    .menu.mobile_nav li ul {
    	visibility: visible !important;
    	display: block !important;
    	position: relative;
    	overflow: hidden;
    	top: 0px !important;
    	left: 0px !important;
    	width: auto !important;
    	background: none;
    	border: none;
    	padding: 0;
    	margin: 0px;
    	padding-left: 15px;
    }
    .menu.mobile_nav li ul li {
    	border: none !important;
    	font-size: 12px;
    }
    .menu.mobile_nav li ul li a {
    	border: none !important;
    	font-size: 12px;
    	padding: 3px 3px;
    }
    .menu.mobile_nav > ul > li:first-child > a {
    	border-top: none;
    }
    .menu.mobile_nav > ul > li:last-child > a {
    	border-bottom: none;
    }
    .menu.mobile_nav a {
    	background: none;
    	border: none;
    	border-bottom: 1px solid #CCC;
    	border-top: 1px solid #FFF;
    	-webkit-border-radius: 0;
    	-moz-border-radius: 0;
    	border-radius: 0;
    }
    .menu.mobile_nav li ul:before, .menu.mobile_nav > ul > li.current_page_item > a:after {
    	background: none;
    }
    
    @media ( max-width: 800px ) {
    #access .home {
    	display: none;
    }
    #mobile_menu {
    	display: block;
    	margin-top: 20px;
    }
    }

    4. Replace ".sf-menu" with ".nav.sf-menu"

    I hope I haven't forgot any step.
    And I also hope that someone will help with improvements.
    The issue with the width of the dropdown menus, on resizing the browser, is still there.

    Enjoy.
    Thank you.

    Posted 6 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.