WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] [How-To] Menu parent links + hover dropdowns, while keeping mobile support (20 posts)

  1. acub
    Member
    Posted 11 months ago #

    Requirement: An activated child theme of Customizr.

    Code [CSS] (goes in style.css of child theme or in Custom CSS panel under Customiz'it! dashboard page - just press the blue button)

    /* This is positioning and display, for keeping both
     * active parent links and mobile support (click only, no hover).
     * Not optional. */
    @media (min-width: 980px) {
    	ul.nav li.dropdown a.a-caret:hover + ul.dropdown-menu,
    	ul.nav li.dropdown ul.dropdown-menu:hover {
    		display: block;
    	}
    }
    ul.nav li.dropdown > ul.dropdown-menu {
    	padding-top: 10px;
    	margin: 0;
    }
    .nav > li > a.a-caret {
    	display: block;
    	padding: 8px;
    	position: absolute;
    	height: 10px;
    	width: 10px;
    	top: 0;
    	left: 10px;
    }
    .nav > li > a.a-stripped {
    	padding: 5px 2px 5px 38px;
    }
    .navbar .nav .dropdown-toggle .caret {
    	margin-top: 4px;
    	margin-left: 1px;
    }
    .navbar .nav > li > .dropdown-menu:before {
    	left: 16px;
    }
    .navbar .nav > li > .dropdown-menu:after {
    	left: 17px;
    }
    
    /* This is menu styling, it's optional.
     * Don't add if you're happy with how your menu looks.
     * Adds some soft transparency and some fancy inset
     * shadows to ul.dropdown-menu on narrower screens */
    
    .navbar .navbar-inner {
    	box-shadow: 0 2px 15px rgba(0,0,0, 0.12);
    	}
    .navbar .nav > li > .dropdown-menu:before {
    	border-bottom: 7px solid rgba(153, 153, 153, 0.27);
    	}
    .navbar .nav > li > .dropdown-menu:after {
    	border-bottom: 6px solid rgba(255,255,255,.9);
    	}
    ul.dropdown-menu {
    	background-color:rgba(255,255,255, .45);
    	}
    .navbar .nav li.dropdown.open > .dropdown-toggle,
    .navbar .nav li.dropdown.active > .dropdown-toggle,
    .navbar .nav li.dropdown.open.active > .dropdown-toggle {
    	background-color: #ececec;
    	border-radius: 4px;
    	box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
    	}
    @media (max-width: 979px) {
    	ul.nav li.dropdown.open ul.dropdown-menu  {
    		background-color: #ececec;
    		border-radius: 4px;
    		box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
    		}
    	}

    Code [PhP] (goes in your child theme's functions.php).

    add_filter('tc_menu_display', 'acub_menu_display');
    function acub_menu_display($output) {
    	echo preg_replace('| class="dropdown-toggle" data-toggle="dropdown" data-target="#"(.+?)<b |', ' class="a-stripped" $1</a><a href="#" class="dropdown-toggle a-caret" data-toggle="dropdown" data-target="#"><b ', $output, -1);
    	}

    Note: functions.php of your child theme only contains your personal functions, it should not be a copy of parent's theme functions.php. When you add a function in the child theme's functions.php do it just before the ending line, that should contain

    ?>

    and should remain untouched. Make sure you're not adding functions inside other functions (mind the accolades);

    The code, explained
    I'm filtering the output of tc_menu_display() and using a preg_replace to pass the class, data-toggle and data-target atributes from .navbar .nav li.dropdown a to a pseudo element I'm adding at replace: .navbar .nav li.dropdown a.a-caret, which is basically a wrapper for b.caret.

    I'm also adding class a-stripped to the original link, for CSS targeting. CSS resolves the "2-links where-only-one-was-intended" problem, repositions the caret and tricks the dropdown to stay open when it should. The second part of CSS is styling, optional (adds a bit of transparency to dropdowns on wider screens and a soft shadow on narrower ones).

    Enjoy!

    @nikeo: I'm pretty sure this needs to be added to FAQ list. There's been a lot of expectation for it.

  2. nikeo
    Member
    Theme Author

    Posted 11 months ago #

    Hey Acub,
    This looks like some very smart coding !
    It must be tested in different configurations and browsers but looks awesome!
    I am sure you are gonna make some happy users with this! This could be definitely a part of the code snippets selection for Customizr.

  3. acub
    Member
    Posted 11 months ago #

    Thank you nikeo.
    I've been trying to test it as much as I could on my installation of the theme. And actually there is one small improvement that I want to add to it: in order for the drop-down to stay open when hovering the parent link (not only on caret hover) for desktop displays, in the CSS of my initial post one should replace :

    @media (min-width: 980px) {
    	ul.nav li.dropdown a.a-caret:hover + ul.dropdown-menu,
    	ul.nav li.dropdown ul.dropdown-menu:hover {
    		display: block;
    	}
    }

    with

    @media (min-width: 980px) {
    	ul.nav li.dropdown:hover a.a-caret + ul.dropdown-menu,
    	ul.nav li.dropdown a.a-caret:hover + ul.dropdown-menu,
    	ul.nav li.dropdown ul.dropdown-menu:hover {
    		display: block;
    	}
    }

    (I'm adding the ul.nav li.dropdown:hover a.a-caret + ul.dropdown-menu selector to the rule.)

    For anyone who wants to see how the menu looks and feels, I have it installed on ccbra.ro and it included the small addition I mentioned now.

    Please report any glithces or problems with it here and we'll try to solve them.

  4. acub
    Member
    Posted 11 months ago #

    Just realized that right now this solution doesn't support 3rd and 4th level sub-menus. I need to adjust both the preg_replace and the CSS to apply the mods to those levels, too.

    I'll get back here with the updated code snippets after a bit of testing, to make sure everything's proper.

  5. catcher10lp
    Member
    Posted 11 months ago #

    thanks for investing so much time for this ! :)
    I'll try it out tomorrow :)

    thank you!!! :)

  6. joanwalsh
    Member
    Posted 11 months ago #

    thanks for your time on this catcher. will keep an eye out for your update. j

  7. catcher10lp
    Member
    Posted 11 months ago #

    Hmm... I added the code into my CSS-box/functions.php of my child-theme but I think that it still doesn't work :/
    Could it be a reason that I still use wordpress 3.5 and customizr 3.0.9??

    PS: @joanwalsh: I think you mean acub ;)

  8. joanwalsh
    Member
    Posted 11 months ago #

    oh dear yes your right catcher :), i meant thank you to acub ! ...too much time spent on pc today had me googled.

    ..can i revert back to customzr 3.0.9...?

  9. ElectricFeet
    Member
    Posted 11 months ago #

    ..can i revert back to customzr 3.0.9...?

    Yes (see here, substituting 3.0.9 in the url), but why?

  10. acub
    Member
    Posted 10 months ago #

    Ok, here's the final code. You may view and test the menu here. Let me know if you find any glitches. I'll give it a few days for testing/feedback and, if everything's cool, I'll add to site snippets.

    CSS (goes in style.css of your child theme):

    ul.nav li.dropdown > ul.dropdown-menu {
    	padding-top: 10px;
    	margin: 0;
    	}
    .nav > li > a.a-caret {
    	display: block;
    	padding: 8px;
    	position: absolute;
    	height: 10px;
    	width: 10px;
    	top: 1px;
    	left: 10px;
    	}
    .nav > li > a.a-stripped {
    	padding: 5px 2px 5px 38px;
    	}
    .navbar .nav .dropdown-toggle .caret {
    	margin-top: 4px;
    	margin-left: 1px;
    	}
    .navbar .nav > li > .dropdown-menu:before {
    	left: 16px;
    	}
    .navbar .nav > li > .dropdown-menu:after {
    	left: 17px;
    	}
    @media (min-width: 980px) {
    	ul.nav li.dropdown a.a-caret:hover + ul.dropdown-menu,
    	ul.nav li.dropdown ul.dropdown-menu:hover {
    		display: block;
    		z-index: 1001;
    		}
    	}
    .navbar .navbar-inner {
    	box-shadow: 0 2px 15px rgba(0,0,0, 0.12);
    	}
    .navbar .nav > li > .dropdown-menu:before {
    	border-bottom: 7px solid rgba(153, 153, 153, 0.27);
    	}
    .navbar .nav > li > .dropdown-menu:after {
    	border-bottom: 6px solid rgba(255,255,255,.9);
    	}
    .navbar .nav li.dropdown.open > .dropdown-toggle,
    .navbar .nav li.dropdown.active > .dropdown-toggle,
    .navbar .nav li.dropdown.open.active > .dropdown-toggle {
    	background-color: #ececec;
    	border-radius: 4px;
    	box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
    	}
    ul.dropdown-menu {
    	background-color:rgba(255,255,255, .8);
    	}
    @media (max-width: 979px) {
    	.nav > li > a.a-stripped {padding-right: 45px; padding-left: 45px;}
    	.nav > li > a.a-caret {
    		border: 1px solid #ddd;
    		}
    	.nav-collapse .nav > li > a.a-caret:hover {
    		background-color: #ddd
    		}
    	ul.nav li.dropdown.open ul.dropdown-menu  {
    		background-color: #ececec;
    		border-radius: 4px;
    		box-shadow: inset 0 2px 3px rgba(0,0,0,.35);
    		}
    	.dropdown-submenu > a:after {
    		border-left-color: transparent;
    		border-top-color: #ccc;
    		border-width: 5px 5px 0 5px;
    		}
    	.dropdown-submenu:hover > a:after {
    		border-top-color: #fff;
    		}
    	.dropdown-submenu:hover > a:after {
    		border-left-color: transparent;
    		}
    	ul.nav li.dropdown.open ul.dropdown-menu .dropdown-submenu ul.dropdown-menu {
    		background-color: #f8f8f8;
    		border-radius: 0;
    		box-shadow: 0 2px 3px rgba(0,0,0,.21);
    		display: block;
    		margin-right: 4px;
    		}
    	ul.nav li.dropdown.open ul.dropdown-menu .dropdown-submenu:hover > a {
    		color: white;
    		}
    	}

    PHP (goes in functions.php of child theme):

    add_filter('tc_menu_display', 'acub_menu_display');
    function acub_menu_display($output) {
    	echo preg_replace('| class="dropdown-toggle" data-toggle="dropdown" data-target="#"(.+?)<b |', ' class="a-stripped" $1</a><a href="#" class="dropdown-toggle a-caret" data-toggle="dropdown" data-target="#"><b ', $output, -1);
    	}

    Very important note: apart from all the rest of the child theme's files, functions.php and style.css are the only 2 files that should not be modified copies of their parent counterparts; please read about creating child themes.

    Not so important note: This snippet has been developed on Customizr 3.0.13 and WP 3.6.1 and is not guaranteed to work on previous or later versions.

    Enjoy.

  11. acub
    Member
    Posted 10 months ago #

    Darn! Forgot something. Add this to the CSS:

    @media (min-width: 980px) {
    	ul.nav li.dropdown:hover a.a-caret + ul.dropdown-menu {
    		display: block;
    	}
    }

    The final snippet on site will have this included.

    Sorry. :p

  12. acub
    Member
    Posted 10 months ago #

    Please note that all of the above are dev versions.

    This snippet has been added in the snippets collection on Customizrs' official website and that's where you'll find the updated version for the latest release of Customizr.

    This topic may be closed.

  13. pabloalvestegui
    Member
    Posted 10 months ago #

    Im not able to find the

    ?>

    In the fuctions.php file of my child theme so I'm afraid that if I paste the code just anywher I might be doing something really fatal to my site.

    Sorry to ask but being a non-PHP-able user I just have to put on a hard face.

  14. esmi
    Forum Moderator
    Posted 10 months ago #

    As per the Forum Welcome, please post your own topic.
    http://wordpress.org/support/theme/customizr

  15. acub
    Member
    Posted 10 months ago #

    Well, technically, it doesn't need one. PHP documentation says that "pure php files" should omit the ending tag, so the possibility of having white space sent before headers is smaller.

    If you don't have one you might either put one yourself on the last line of the file or you might just add your code at the end of it without worries.

    I mentioned it above because non-php-able users, when told to add a function at the end of a php file and the file has the ending tag, there is a big risk of adding code after the tag and that will, most probably, generate a WSoD error.

    @esmi: his question is legit, it's about the solution posted above. He was unsure on how to apply it.

  16. pabloalvestegui
    Member
    Posted 10 months ago #

    Acub, thank you very much for your answer as well as for the clarification to our respected Forum Moderator. I will try these codes immediatly.

    Thanks again!!!!

  17. pabloalvestegui
    Member
    Posted 10 months ago #

    It's working wonderfully!!!
    Thanks very much.

  18. ashu8000
    Member
    Posted 10 months ago #

    @Acub: Can we have short code for static logo/flag like you installed on ccbra.ro

  19. acub
    Member
    Posted 10 months ago #

    First, I don't understand what you mean.
    Secondly, it has nothing to do with the menu issue discussed in this thread, so you need to start a new one, with a proper, specific name.

    Please try to use common web terminology, I really don't understand what you mean by "short code" and "static". I assume you mean "snippet" and "fixed positioned", but I'm only wild guessing here.

  20. ashu8000
    Member
    Posted 10 months ago #

    Sorry Acub, I am new to this field, so didn't use proper terminology but you guessed right. I mean snippet and fixed positioned logo.

Reply

You must log in to post.

About this Theme

About this Topic