Retractable menu breaks css properties when triggered [closed]

Question

Retractable menu breaks css properties when triggered [closed]

Navigation

2

/*

Responsive Mobile Menu v1.0
Plugin URI: responsivemobilemenu.com

Author: Sergio Vitov
Author URI: http://xmacros.com

License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/

*/

function responsiveMobileMenu() {	
		$('.rmm').each(function() {
			
			
			
			$(this).children('ul').addClass('rmm-main-list');	// mark main menu list
			
			
			var $style = $(this).attr('data-menu-style');	// get menu style
				if ( typeof $style == 'undefined' ||  $style == false )
					{
						$(this).addClass('graphite'); // set graphite style if style is not defined
					}
				else {
						$(this).addClass($style);
					}
					
					
			/* 	width of menu list (non-toggled) */
			
			var $width = 0;
				$(this).find('ul li').each(function() {
					$width += $(this).outerWidth();
				});
				
			// if modern browser
			
			if ($.support.leadingWhitespace) {
				$(this).css('max-width' , $width*1.05+'px');
			}
			// 
			else {
				$(this).css('width' , $width*1.05+'px');
			}
		
	 	});
}
function getMobileMenu() {

	/* 	build toggled dropdown menu list */
	
	$('.rmm').each(function() {	
				var menutitle = $(this).attr("data-menu-title");
				if ( menutitle == "" ) {
					menutitle = "Menu";
				}
				else if ( menutitle == undefined ) {
					menutitle = "Menu";
				}
				var $menulist = $(this).children('.rmm-main-list').html();
				var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>";
				$(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");

		});
}

function adaptMenu() {
	
	/* 	toggle menu on resize */
	
	$('.rmm').each(function() {
			var $width = $(this).css('max-width');
			$width = $width.replace('px', ''); 
			if ( $(this).parent().width() < $width*1.05 ) {
				$(this).children('.rmm-main-list').hide(0);
				$(this).children('.rmm-toggled').show(0);
			}
			else {
				$(this).children('.rmm-main-list').show(0);
				$(this).children('.rmm-toggled').hide(0);
			}
		});
		
}

$(function() {

	 responsiveMobileMenu();
	 getMobileMenu();
	 adaptMenu();
	 
	 /* slide down mobile menu on click */
	 
	 $('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
	 	if ( $(this).is(".rmm-closed")) {
		 	 $(this).find('ul').stop().show(300);
		 	 $(this).removeClass("rmm-closed");
	 	}
	 	else {
		 	$(this).find('ul').stop().hide(300);
		 	 $(this).addClass("rmm-closed");
	 	}
		
	});	

});
	/* 	hide mobile menu on resize */
$(window).resize(function() {
 	adaptMenu();
});

/*

Responsive Mobile Menu v1.0
Plugin URI: responsivemobilemenu.com

Author: Sergio Vitov
Author URI: http://xmacros.com

License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/

*/

.rmm {
	display:block;
	position:relative;
	width:100%;
	padding:0px;
	margin:0 auto !important;
	text-align: center;
	line-height:19px !important;
}
.rmm * {
	-webkit-tap-highlight-color:transparent !important;
	font-family:Arial;
}
.rmm a {
	color:#ebebeb;
	text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
	margin:0px;
	padding:0px;
}
.rmm ul {
	display:block;
	width:auto !important;
	margin:0 auto !important;
	overflow:hidden;
	list-style:none;
}


/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
	display:none !important;
	height:0px !important;
	width:0px !important;
}
/* */


.rmm .rmm-main-list li {
	display:inline;
	padding:padding:0px;
	margin:0px !important;
}
.rmm-toggled {
	display:none;
	width:100%;
	position:relative;
	overflow:hidden;
	margin:0 auto !important;
}
.rmm-button:hover {
	cursor:pointer;
}
.rmm .rmm-toggled ul {
	display:none;
	margin:0px !important;
	padding:0px !important;
}
.rmm .rmm-toggled ul li {
	display:block;
	margin:0 auto !important;
}




/* GRAPHITE STYLE */

.rmm.graphite .rmm-main-list li a {
	display:inline-block;
	padding:8px 30px 8px 30px;
	margin:0px -3px 0px -3px;
	font-size:15px;
	text-shadow:1px 1px 1px #333333;
	background-color:#444444;
	border-left:1px solid #555555;
	background-image:url('../rmm-img/graphite-menu-bg.png');
	background-repeat:repeat-x;
}
.rmm.graphite .rmm-main-list li a:hover {
	background-image:url('../rmm-img/graphite-menu-bg-hover.png');
}
.rmm.graphite .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rmm.graphite .rmm-main-list li:last-child a {
	-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.rmm.graphite .rmm-toggled {
	width:95%;
	background-color:#555555;
	min-height:36px;
	border-radius:6px;
}
.rmm.graphite .rmm-toggled-controls {
	display:block;
	height:36px;
	color:white;
	text-align:left;
	position:relative;
	background-image:url('../rmm-img/graphite-menu-bg.png');
	background-repeat:repeat-x;
	border-radius:6px;
}
.rmm.graphite .rmm-toggled-title {
	position:relative;
	top:9px;
	left:15px;
	font-size:16px;
	color:white;
	text-shadow:1px 1px 1px black;
}
.rmm.graphite .rmm-button {
	display:block;
	position:absolute;
	right:15px;
	top:8px;
}

.rmm.graphite .rmm-button span {
	display:block;
	margin-top:4px;
	height:2px;
	background:white;
	width:24px;
}
.rmm.graphite .rmm-toggled ul li a {
	display:block;
	width:100%;
	background-color:#555555;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #333333;
	border-top:1px solid #777777;
	text-shadow:1px 1px 1px #333333;
}
.rmm.graphite .rmm-toggled ul li a:active {
	background-color:#444444;
	border-bottom:1px solid #444444;
	border-top:1px solid #444444;
}



/* SAPPHIRE STYLE */

.rmm.sapphire .rmm-main-list li a {
	display:inline-block;
	padding:8px 30px 8px 30px;
	margin:0px -3px 0px -3px;
	font-size:15px;
	text-shadow:1px 1px 1px #3e587b;
	background-color:#537b9f;
	border-left:1px solid #3e587b;
	background-image:url('../rmm-img/sapphire-menu-bg.png');
	background-repeat:repeat-x;
}
.rmm.sapphire .rmm-main-list li a:hover {
	background:#3e597b;
}
.rmm.sapphire .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.rmm.sapphire .rmm-main-list li:last-child a {
	-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.rmm.sapphire .rmm-toggled {
	width:95%;
	background-color:#537b9f;
	min-height:36px;
	border-radius:6px;
}
.rmm.sapphire .rmm-toggled-controls {
	display:block;
	height:36px;
	color:white;
	text-align:left;
	position:relative;
	background-image:url('../rmm-img/sapphire-menu-bg.png');
	background-repeat:repeat-x;
	border-radius:5px;
}
.rmm.sapphire .rmm-toggled-title {
	position:relative;
	top:9px;
	left:15px;
	font-size:16px;
	color:white;
	text-shadow:1px 1px 1px #3e587b;
}
.rmm.sapphire .rmm-button {
	display:block;
	position:absolute;
	right:9px;
	top:7px;
	width:20px;
	padding:0px 7px 0px 7px;
	border:1px solid #3e587b;
	border-radius:3px;
	background-image:url('../rmm-img/sapphire-menu-bg.png');
	background-position:top;
}

.rmm.sapphire .rmm-button span {
	display:block;
	margin:4px 0px 4px 0px;
	height:2px;
	background:white;
	width:20px;
}
.rmm.sapphire .rmm-toggled ul li a {
	display:block;
	width:100%;
	background-color:#537698;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #3c5779;
	border-top:1px solid #6883a6;
	text-shadow:1px 1px 1px #333333;
}
.rmm.sapphire .rmm-toggled ul li a:active {
	background-color:#3c5779;
	border-bottom:1px solid #3c5779;
	border-top:1px solid #3c5779;
}
.rmm.sapphire .rmm-toggled ul li:first-child a { 
	border-top:1px solid #3c5779 !important;
}





/* MINIMAL STYLE */

.rmm.minimal a {
	color:#333333;
}
.rmm.minimal a:hover {
	opacity:0.7;
}
.rmm.minimal .rmm-main-list li a {
	display:inline-block;
	padding:8px 30px 8px 30px;
	margin:0px -3px 0px -3px;
	font-size:15px;
}
.rmm.minimal .rmm-toggled {
	width:95%;
	min-height:36px;
}
.rmm.minimal .rmm-toggled-controls {
	display:block;
	height:36px;
	color:#333333;
	text-align:left;
	position:relative;
}
.rmm.minimal .rmm-toggled-title {
	position:relative;
	top:9px;
	left:9px;
	font-size:16px;
	color:#33333;
}
.rmm.minimal .rmm-button {
	display:block;
	position:absolute;
	right:9px;
	top:7px;
}

.rmm.minimal .rmm-button span {
	display:block;
	margin:4px 0px 4px 0px;
	height:2px;
	background:#333333;
	width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
	display:block;
	width:100%;
	text-align:center;
	padding:10px 0px 10px 0px;
	border-bottom:1px solid #dedede;
	color:#333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
	border-top:1px solid #dedede;
}
@media (width: 20em){
.logo{
	max-width: 80%;
	margin: 1%;
	margin-left: 5%;
	float: left;
}
.logo img{
	max-width: 100%;
}
.social{
	max-width: 11%;
	float: left;
	margin-left: 2%;
}
.social img{
	max-width: 100%;
}
}

<!DOCTYPE html>
<html>
<head>
<title>Responsive Mobile Menu</title>
<link rel="stylesheet" href="rmm-css/responsivemobilemenu.css" type="text/css"/>
<link rel="stylesheet" href="rmm-css/estilizacao_reader.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
		<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script><scripttype="text/javascript" src="rmm-js/responsivemobilemenu.js"></script>
</head>
<body>

	<header>
		<div class="logo">
			<img src="img/logo.png"/>
		</div>
		<div class="social">
			<img src="img/facebook2.gif"/>
			<img src="img/twitter2.gif"/>
			<img src="img/isntagran2.gif"/>
		</div>
	</header>

        <div class="rmm">
            <ul>
                <li><a href='#home'>Home</a></li>
                <li><a href='#about-me'>About me</a></li>
                <li><a href='#gallery'>Gallery</a></li>
                <li><a href='#blog'>Blog</a></li>
                <li><a href='#links'>Links</a></li>
                <li><a href='#sitemap'>Sitemap</a></li> 
            </ul>
        </div>
</body>
</html>

I'm creating a website to improve my skills with html and CSS. I'm trying to understand better about retractable menus and I'm having an issue that has already occurred with two menus I downloaded to use for example.

I have the menu ready, I just changed the information inside li and started to insert the logo, link to social networks, these things.

While I do not click anything on the menu, the layout stays the way I want. The problem is when I click on the menu so it shows me the options, it loses all the css information I put in the other div .

I think I have something in Javascript (which I do not understand) that does this because I can not identify anything in html and CSS.

Javascript code:

function responsiveMobileMenu() {
    $('.rmm').each(function () {

        $(this).children('ul').addClass('rmm-main-list'); // mark main menu list

        var $style = $(this).attr('data-menu-style'); // get menu style
        if (typeof $style == 'undefined' || $style == false){
            $(this).addClass('graphite'); // set graphite style if style is not defined
        }
        else {
            $(this).addClass($style);
        }

        /* width of menu list (non-toggled) */
        var $width = 0;
        $(this).find('ul li').each(function () {
            $width += $(this).outerWidth();
        });

        // if modern browser
        if ($.support.leadingWhitespace) {
            $(this).css('max-width', $width * 1.05 + 'px');
        }
        else {
            $(this).css('width', $width * 1.05 + 'px');
        }

    });
}
function getMobileMenu() {

    /*  build toggled dropdown menu list */
    $('.rmm').each(function () {
        var menutitle = $(this).attr("data-menu-title");
        if (menutitle == "") {
            menutitle = "Menu";
        }
        else if (menutitle == undefined) {
            menutitle = "Menu";
        }
        var $menulist = $(this).children('.rmm-main-list').html();
        var $menucontrols = "<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>";
        $(this).prepend("<div class='rmm-toggled rmm-closed'>" + $menucontrols + "<ul>" + $menulist + "</ul></div>");

    });
}

function adaptMenu() {

    /*  toggle menu on resize */
    $('.rmm').each(function () {
        var $width = $(this).css('max-width');
        $width = $width.replace('px', '');
        if ($(this).parent().width() < $width * 1.05) {
            $(this).children('.rmm-main-list').hide(0);
            $(this).children('.rmm-toggled').show(0);
        }
        else {
            $(this).children('.rmm-main-list').show(0);
            $(this).children('.rmm-toggled').hide(0);
        }
    });

}

$(function () {
    responsiveMobileMenu();
    getMobileMenu();
    adaptMenu();

    /* slide down mobile menu on click */
    $('.rmm-toggled, .rmm-toggled .rmm-button').click(function () {
        if ($(this).is(".rmm-closed")) {
            $(this).find('ul').stop().show(300);
            $(this).removeClass("rmm-closed");
        }
        else {
            $(this).find('ul').stop().hide(300);
            $(this).addClass("rmm-closed");
        }

    });
});

/*  hide mobile menu on resize */
$(window).resize(function () {
    adaptMenu();
});

CSS

/*

Responsive Mobile Menu v1.0
Plugin URI: responsivemobilemenu.com

Author: Sergio Vitov
Author URI: http://xmacros.com

License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/

*/

.rmm {
    display:block;
    position:relative;
    width:100%;
    padding:0px;
    margin:0 auto !important;
    text-align: center;
    line-height:19px !important;
}
.rmm * {
    -webkit-tap-highlight-color:transparent !important;
    font-family:Arial;
}
.rmm a {
    color:#ebebeb;
    text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
    margin:0px;
    padding:0px;
}
.rmm ul {
    display:block;
    width:auto !important;
    margin:0 auto !important;
    overflow:hidden;
    list-style:none;
}


/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
    display:none !important;
    height:0px !important;
    width:0px !important;
}
/* */


.rmm .rmm-main-list li {
    display:inline;
    padding:padding:0px;
    margin:0px !important;
}
.rmm-toggled {
    display:none;
    width:100%;
    position:relative;
    overflow:hidden;
    margin:0 auto !important;
}
.rmm-button:hover {
    cursor:pointer;
}
.rmm .rmm-toggled ul {
    display:none;
    margin:0px !important;
    padding:0px !important;
}
.rmm .rmm-toggled ul li {
    display:block;
    margin:0 auto !important;
}




/* GRAPHITE STYLE */

.rmm.graphite .rmm-main-list li a {
    display:inline-block;
    padding:8px 30px 8px 30px;
    margin:0px -3px 0px -3px;
    font-size:15px;
    text-shadow:1px 1px 1px #333333;
    background-color:#444444;
    border-left:1px solid #555555;
    background-image:url('../rmm-img/graphite-menu-bg.png');
    background-repeat:repeat-x;
}
.rmm.graphite .rmm-main-list li a:hover {
    background-image:url('../rmm-img/graphite-menu-bg-hover.png');
}
.rmm.graphite .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rmm.graphite .rmm-main-list li:last-child a {
    -webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.rmm.graphite .rmm-toggled {
    width:95%;
    background-color:#555555;
    min-height:36px;
    border-radius:6px;
}
.rmm.graphite .rmm-toggled-controls {
    display:block;
    height:36px;
    color:white;
    text-align:left;
    position:relative;
    background-image:url('../rmm-img/graphite-menu-bg.png');
    background-repeat:repeat-x;
    border-radius:6px;
}
.rmm.graphite .rmm-toggled-title {
    position:relative;
    top:9px;
    left:15px;
    font-size:16px;
    color:white;
    text-shadow:1px 1px 1px black;
}
.rmm.graphite .rmm-button {
    display:block;
    position:absolute;
    right:15px;
    top:8px;
}

.rmm.graphite .rmm-button span {
    display:block;
    margin-top:4px;
    height:2px;
    background:white;
    width:24px;
}
.rmm.graphite .rmm-toggled ul li a {
    display:block;
    width:100%;
    background-color:#555555;
    text-align:center;
    padding:10px 0px 10px 0px;
    border-bottom:1px solid #333333;
    border-top:1px solid #777777;
    text-shadow:1px 1px 1px #333333;
}
.rmm.graphite .rmm-toggled ul li a:active {
    background-color:#444444;
    border-bottom:1px solid #444444;
    border-top:1px solid #444444;
}



/* SAPPHIRE STYLE */

.rmm.sapphire .rmm-main-list li a {
    display:inline-block;
    padding:8px 30px 8px 30px;
    margin:0px -3px 0px -3px;
    font-size:15px;
    text-shadow:1px 1px 1px #3e587b;
    background-color:#537b9f;
    border-left:1px solid #3e587b;
    background-image:url('../rmm-img/sapphire-menu-bg.png');
    background-repeat:repeat-x;
}
.rmm.sapphire .rmm-main-list li a:hover {
    background:#3e597b;
}
.rmm.sapphire .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.rmm.sapphire .rmm-main-list li:last-child a {
    -webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.rmm.sapphire .rmm-toggled {
    width:95%;
    background-color:#537b9f;
    min-height:36px;
    border-radius:6px;
}
.rmm.sapphire .rmm-toggled-controls {
    display:block;
    height:36px;
    color:white;
    text-align:left;
    position:relative;
    background-image:url('../rmm-img/sapphire-menu-bg.png');
    background-repeat:repeat-x;
    border-radius:5px;
}
.rmm.sapphire .rmm-toggled-title {
    position:relative;
    top:9px;
    left:15px;
    font-size:16px;
    color:white;
    text-shadow:1px 1px 1px #3e587b;
}
.rmm.sapphire .rmm-button {
    display:block;
    position:absolute;
    right:9px;
    top:7px;
    width:20px;
    padding:0px 7px 0px 7px;
    border:1px solid #3e587b;
    border-radius:3px;
    background-image:url('../rmm-img/sapphire-menu-bg.png');
    background-position:top;
}

.rmm.sapphire .rmm-button span {
    display:block;
    margin:4px 0px 4px 0px;
    height:2px;
    background:white;
    width:20px;
}
.rmm.sapphire .rmm-toggled ul li a {
    display:block;
    width:100%;
    background-color:#537698;
    text-align:center;
    padding:10px 0px 10px 0px;
    border-bottom:1px solid #3c5779;
    border-top:1px solid #6883a6;
    text-shadow:1px 1px 1px #333333;
}
.rmm.sapphire .rmm-toggled ul li a:active {
    background-color:#3c5779;
    border-bottom:1px solid #3c5779;
    border-top:1px solid #3c5779;
}
.rmm.sapphire .rmm-toggled ul li:first-child a { 
    border-top:1px solid #3c5779 !important;
}





/* MINIMAL STYLE */

.rmm.minimal a {
    color:#333333;
}
.rmm.minimal a:hover {
    opacity:0.7;
}
.rmm.minimal .rmm-main-list li a {
    display:inline-block;
    padding:8px 30px 8px 30px;
    margin:0px -3px 0px -3px;
    font-size:15px;
}
.rmm.minimal .rmm-toggled {
    width:95%;
    min-height:36px;
}
.rmm.minimal .rmm-toggled-controls {
    display:block;
    height:36px;
    color:#333333;
    text-align:left;
    position:relative;
}
.rmm.minimal .rmm-toggled-title {
    position:relative;
    top:9px;
    left:9px;
    font-size:16px;
    color:#33333;
}
.rmm.minimal .rmm-button {
    display:block;
    position:absolute;
    right:9px;
    top:7px;
}

.rmm.minimal .rmm-button span {
    display:block;
    margin:4px 0px 4px 0px;
    height:2px;
    background:#333333;
    width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
    display:block;
    width:100%;
    text-align:center;
    padding:10px 0px 10px 0px;
    border-bottom:1px solid #dedede;
    color:#333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
    border-top:1px solid #dedede;
}

jquery css

asked by anonymous 02.06.2015 / 22:46

0 answers

Filter in gridview, how to do? What is the Substitution Model in Scala - Substitution Model