Question

您好我已经查看了一些响应式多级菜单。我完全复制css和javascript。 Here is my NavBar。问题是，我无法将默认颜色（绿色）更改为其他颜色。这是CSS文件。

 @import url(http://fonts.googleapis.com/css?
 family=Open+Sans:400italic,400,300,600);

@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.woff') format('woff'),
    url('../fonts/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

/* minimal styles for that navi */
.rmm {margin: 0 auto;}
.rmm ul {margin: 0; padding:0; list-style: none; position: relative; 
background: #000;}
.rmm ul:after {content: ""; clear: both; display: block;}
.rmm ul li {float: left;}
.rmm ul li:hover {background: #202020;}
.rmm ul li:hover > ul {display: block;}
.rmm ul li:hover a{color: #fff;}
.rmm ul li a {color: #fff; display: block; text-decoration: none;}
.rmm ul ul {display: none; margin:0; padding: 0; position: absolute; top: 
100%;}
.rmm ul ul li {float: none; position: relative;}
.rmm ul ul li a{color: #fff;}
.rmm ul ul li a:hover {background: #202020;}
.rmm ul ul ul {position: absolute; left: 100%; top:0; width: 100%;}

/* mobile menu header button */
.rmm-toggled {width: 100%; background-color: #555555; min-height: 50px; 
margin: 0 auto; display: none;}
.rmm-closed ~ .rmm-mobile {display: none!important;}
.rmm-toggled-controls{width: 100%;}
.rmm-toggled-title{width: 60%; float: left; font-size: 27px; color: #fff; 
font-weight:600; display: block; padding: 8px 0; text-decoration: none; 
text-transform: uppercase; text-align: left; padding-left: 35px;}
.rmm-toggled-button{width: 20%; float: left; margin-top: 3px;
display:block;
width: 32px;
padding:0 !important;
margin:10px 10px 0 0;
border:1px solid #fff;
border-radius:3px;
float: right;
}
.rmm-toggled-button span{float: left; display:block; margin: 3px 6px; 
height: 3px; background:white; width:20px;}

/* normalny back button visible only on mobiles  */
.rmm .rmm-back{display: none; font-size: 12px;}
.rmm .rmm-back:after {display: none;}
.rmm .rmm-back a:after {
font-family: 'icomoon';
speak: none;
-webkit-font-smoothing: antialiased;
content: "\e000";
position: relative;
display: inline-block;
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
top: 1px;
right: -2px ;
float: left;
font-size: 10px;
 }
.rmm-mobile .rmm-back{display: block;}

   /* mobile menu list */
  .rmm-mobile{width: 100%;}
  .rmm-mobile .rmm-dropdown:hover ~ ul, .rmm-mobile .rmm-dropdown:hover > ul 
  ,.rmm-mobile .rmm-dropdown:hover + ul {display: none!important;}
   .rmm-mobile ul{width: 100%; position: inherit!important;}
   .rmm-mobile li{width: 100%; }

   /* mobile menu js action */
  .rmm-dropdown{display: block!important;}
  .rmm-mobile .rmm-subview{display: block!important; width: 100%;}
  .rmm-mobile .rmm-subover-hidden{display: none!important;}
  .rmm-mobile .rmm-subover-visible{display: block;}
  .rmm-mobile .rmm-subover-header{display: none!important; padding: 0; 
   margin:0;}

  /* mobile menu content */
  .rmm-mobile .rmm-submenu{position: relative; left: 0px;}

  .rmm .rmm-mobile li:hover > ul {display: none;}

  /* arrow down for wide screen */
  .rmm.style {text-align: left; font-family: Tahoma;}
  .rmm.style ul {box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
   background:#990; 
   text-transform: uppercase; display: inline-table; text-align:left;}
  .rmm.style ul li {text-align:left;}
  .rmm.style ul li:hover {background: #4b545f;}
  .rmm.style ul ul {display: none; margin:0; background: #5f6975; border-
   radius: 0px; padding: 0; position: absolute;}
  .rmm.style ul li a {color: #fff; font-weight:600; display: block; padding: 
   15px 35px; text-decoration: none; font-weight:600; }
  .rmm.style ul ul li {border-bottom: 1px solid #575F6A; border-top: 1px 
  solid #6B727C;}
  .rmm.style ul ul li a {padding: 12px 35px; color: #fff; }
  .rmm.style ul ul li a:hover {background: #4b545f;}

    /* arrow down for wide screen */
   .rmm.style ul li > a:not(:only-child):after {
   font-family: 'icomoon';
    speak: none;
   -webkit-font-smoothing: antialiased;
   content: "\e000";
   position: relative;
   display: inline-block;
   -webkit-transform: rotate(210deg);
    transform: rotate(210deg);
    top: -4px;
    left: 1px;
     font-size: 10px;
    }

   /* arrow left for wide screen submenus  */
   .rmm.style ul ul li > a:not(:only-child):after {-webkit-transform: 
   rotate(120deg)!important; transform: rotate(120deg)!important; top: 2px; 
   font-size: 14px; float: right; margin-right: -20px;}

   /* mobile style */
   .rmm.style .rmm-mobile li > a:not(:only-child):after {-webkit-transform: 
     rotate(120deg)!important; transform: rotate(120deg)!important; top: 
    4px!important; font-size: 14px!important; float: right; margin-right: 
   -20px;}
   .rmm.style .rmm-mobile li{background: #3ab4a6; border-bottom: 1px solid 
    #575f6a!important; border-top: 0!important; }

我试图改变颜色或添加背景颜色的东西。但默认颜色仍为绿色。 javascript将执行到移动版本的功能。与颜色无关。请帮忙。我还是新手:) 这是我的HTML

<!DOCTYPE html>
<html>
<head>
<title></title>



<!-- Include scripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
</script> 
<script type="text/javascript" src="js/responsivemultimenu.js"></script>

<!-- Include styles -->
<link rel="stylesheet" href="css/responsivemultimenu.css" type="text/css"/>

<!-- Include media queries -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-
scale=1, user-scalable=no"/>
</head>
<body >



<div > 

    <div class="rmm style">
        <ul>
        <li>


                <a href="KPIhome.php" title="KPI">eKPI</a>


        </li>

        <?php if(isset($_SESSION['admin']) || $_SESSION['user_level'] == 5 
|| $_SESSION['user_level']==7 || $_SESSION['user_level'] ==1 ){ ?>

            <li>

                <a href="#">Value Graph</a>
                <ul>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="sales_form.php">Sales Achievement against 
Target</a>
                    </li>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="promo_form.php">Promotion Sales Achievement 
against Target </a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="manhour_form.php">Sales per Manhour</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="trans_form.php">Transaction per Manhour</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="salmonform.php">Salmon Usage Per 1K</a>
                    </li>

                </ul>
            </li>

            <?php } ?>


             <?php if(isset($_SESSION['admin']) || $_SESSION['user_level'] 
  == 5 || $_SESSION['user_level']==7 || $_SESSION['user_level'] ==1){ ?>

            <li>

                <a href="#">Percentage Graph</a>
                <ul>
                    <li <?php if($page == 'home.php'){echo ' 
 class="active"';};?>>
                        <a href="sales_form2.php">Sales Achievement against 
Target (%)</a>
                    </li>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="promo_form2.php">Promotion Sales 
Achievement against Target (%)</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="wastage_form.php">Wastage against Target 
(%)</a>
                    </li>


                </ul>
            </li>

            <?php } ?>

             <?php if(isset($_SESSION['admin']) || $_SESSION['user_level'] 
== 5 || $_SESSION['user_level']==7 || $_SESSION['user_level'] ==1){ ?>

            <li>

                <a href="#">Over Budget</a>
                <ul>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="obtargetform.php">Sales Achievement</a>
                    </li>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="obmtdform.php">Sales Month to Date 
 Achievement</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="obtargetform2.php">Promotion Sales 
Achievement</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="obmtdform2.php">Promotion Month to Date 
Sales Achivement</a>
                    </li>


                </ul>
            </li>

            <?php } ?>



             <?php if(isset($_SESSION['admin'])&& $_SESSION['user_level'] == 0 || $_SESSION['user_level']==7 ){ ?>
            <li>

                <a href="#">Report</a>
                <ul>
                    <li <?php if($page == 'home.php'){echo ' class="active"';};?>>
                        <a href="typereport.php">Add Report</a>
                    </li>



                </ul>
            </li>

            <?php } ?>


        <li>


                <a href="KPIhome.php" title="KPI">Website</a>


        </li>


        <li>


                <a href="KPIhome.php" title="KPI">Admin</a>


        </li>




        </ul>
    </div>
</div>

Answer 1

查找

  /* arrow down for wide screen */
  .rmm.style {text-align: left; font-family: Tahoma;}
  .rmm.style ul {box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
   background:#990;

将#990替换为所需的颜色。享受。

Answer 2

这是您的工作解决方案。请找到＆＃34; RED＆＃34;背景，你可以用你想要的任何东西替换它。

＆＃13;

@import url(http://fonts.googleapis.com/css? family=Open+Sans:400italic,400,300,600); @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon.eot'); src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } /* minimal styles for that navi */ .rmm {margin: 0 auto;} .rmm ul {margin: 0; padding:0; list-style: none; position: relative; background: #000;} .rmm ul:after {content: ""; clear: both; display: block;} .rmm ul li {float: left;} .rmm ul li:hover {background: #202020;} .rmm ul li:hover > ul {display: block;} .rmm ul li:hover a{color: #fff;} .rmm ul li a {color: #fff; display: block; text-decoration: none;} .rmm ul ul {display: none; margin:0; padding: 0; position: absolute; top: 100%;} .rmm ul ul li {float: none; position: relative;} .rmm ul ul li a{color: #fff;} .rmm ul ul li a:hover {background: #202020;} .rmm ul ul ul {position: absolute; left: 100%; top:0; width: 100%;} /* mobile menu header button */ .rmm-toggled {width: 100%; background-color: #555555; min-height: 50px; margin: 0 auto; display: none;} .rmm-closed ~ .rmm-mobile {display: none!important;} .rmm-toggled-controls{width: 100%;} .rmm-toggled-title{width: 60%; float: left; font-size: 27px; color: #fff; font-weight:600; display: block; padding: 8px 0; text-decoration: none; text-transform: uppercase; text-align: left; padding-left: 35px;} .rmm-toggled-button{width: 20%; float: left; margin-top: 3px; display:block; width: 32px; padding:0 !important; margin:10px 10px 0 0; border:1px solid #fff; border-radius:3px; float: right; } .rmm-toggled-button span{float: left; display:block; margin: 3px 6px; height: 3px; background:white; width:20px;} /* normalny back button visible only on mobiles */ .rmm .rmm-back{display: none; font-size: 12px;} .rmm .rmm-back:after {display: none;} .rmm .rmm-back a:after { font-family: 'icomoon'; speak: none; -webkit-font-smoothing: antialiased; content: "\e000"; position: relative; display: inline-block; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); top: 1px; right: -2px ; float: left; font-size: 10px; } .rmm-mobile .rmm-back{display: block;} /* mobile menu list */ .rmm-mobile{width: 100%;} .rmm-mobile .rmm-dropdown:hover ~ ul, .rmm-mobile .rmm-dropdown:hover > ul ,.rmm-mobile .rmm-dropdown:hover + ul {display: none!important;} .rmm-mobile ul{width: 100%; position: inherit!important;} .rmm-mobile li{width: 100%; } /* mobile menu js action */ .rmm-dropdown{display: block!important;} .rmm-mobile .rmm-subview{display: block!important; width: 100%;} .rmm-mobile .rmm-subover-hidden{display: none!important;} .rmm-mobile .rmm-subover-visible{display: block;} .rmm-mobile .rmm-subover-header{display: none!important; padding: 0; margin:0;} /* mobile menu content */ .rmm-mobile .rmm-submenu{position: relative; left: 0px;} .rmm .rmm-mobile li:hover > ul {display: none;} /* arrow down for wide screen */ .rmm.style {text-align: left; font-family: Tahoma;} .rmm.style ul {box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); background:RED; text-transform: uppercase; display: inline-table; text-align:left;} .rmm.style ul li {text-align:left;} .rmm.style ul li:hover {background: #4b545f;} .rmm.style ul ul {display: none; margin:0; background: #5f6975; border- radius: 0px; padding: 0; position: absolute;} .rmm.style ul li a {color: #fff; font-weight:600; display: block; padding: 15px 35px; text-decoration: none; font-weight:600; } .rmm.style ul ul li {border-bottom: 1px solid #575F6A; border-top: 1px solid #6B727C;} .rmm.style ul ul li a {padding: 12px 35px; color: #fff; } .rmm.style ul ul li a:hover {background: #4b545f;} /* arrow down for wide screen */ .rmm.style ul li > a:not(:only-child):after { font-family: 'icomoon'; speak: none; -webkit-font-smoothing: antialiased; content: "\e000"; position: relative; display: inline-block; -webkit-transform: rotate(210deg); transform: rotate(210deg); top: -4px; left: 1px; font-size: 10px; } /* arrow left for wide screen submenus */ .rmm.style ul ul li > a:not(:only-child):after {-webkit-transform: rotate(120deg)!important; transform: rotate(120deg)!important; top: 2px; font-size: 14px; float: right; margin-right: -20px;} /* mobile style */ .rmm.style .rmm-mobile li > a:not(:only-child):after {-webkit-transform: rotate(120deg)!important; transform: rotate(120deg)!important; top: 4px!important; font-size: 14px!important; float: right; margin-right: -20px;} .rmm.style .rmm-mobile li{background: #3ab4a6; border-bottom: 1px solid #575f6a!important; border-top: 0!important; }

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title></title>



<!-- Include scripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
</script> 
<script type="text/javascript" src="js/responsivemultimenu.js"></script>

<!-- Include styles -->
<link rel="stylesheet" href="css/responsivemultimenu.css" type="text/css"/>

<!-- Include media queries -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-
scale=1, user-scalable=no"/>
</head>
<body >



<div > 

    <div class="rmm style">
        <ul>
        <li>


                <a href="KPIhome.php" title="KPI">eKPI</a>


        </li>

        <?php if(isset($_SESSION['admin']) || $_SESSION['user_level'] == 5 
|| $_SESSION['user_level']==7 || $_SESSION['user_level'] ==1 ){ ?>

            <li>

                <a href="#">Value Graph</a>
                <ul>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="sales_form.php">Sales Achievement against 
Target</a>
                    </li>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="promo_form.php">Promotion Sales Achievement 
against Target </a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="manhour_form.php">Sales per Manhour</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="trans_form.php">Transaction per Manhour</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="salmonform.php">Salmon Usage Per 1K</a>
                    </li>

                </ul>
            </li>

            <?php } ?>


             <?php if(isset($_SESSION['admin']) || $_SESSION['user_level'] 
  == 5 || $_SESSION['user_level']==7 || $_SESSION['user_level'] ==1){ ?>

            <li>

                <a href="#">Percentage Graph</a>
                <ul>
                    <li <?php if($page == 'home.php'){echo ' 
 class="active"';};?>>
                        <a href="sales_form2.php">Sales Achievement against 
Target (%)</a>
                    </li>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="promo_form2.php">Promotion Sales 
Achievement against Target (%)</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="wastage_form.php">Wastage against Target 
(%)</a>
                    </li>


                </ul>
            </li>

            <?php } ?>

             <?php if(isset($_SESSION['admin']) || $_SESSION['user_level'] 
== 5 || $_SESSION['user_level']==7 || $_SESSION['user_level'] ==1){ ?>

            <li>

                <a href="#">Over Budget</a>
                <ul>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="obtargetform.php">Sales Achievement</a>
                    </li>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="obmtdform.php">Sales Month to Date 
 Achievement</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="obtargetform2.php">Promotion Sales 
Achievement</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="obmtdform2.php">Promotion Month to Date 
Sales Achivement</a>
                    </li>


                </ul>
            </li>

            <?php } ?>



             <?php if(isset($_SESSION['admin'])&& $_SESSION['user_level'] == 0 || $_SESSION['user_level']==7 ){ ?>
            <li>

                <a href="#">Report</a>
                <ul>
                    <li <?php if($page == 'home.php'){echo ' class="active"';};?>>
                        <a href="typereport.php">Add Report</a>
                    </li>



                </ul>
            </li>

            <?php } ?>


        <li>


                <a href="KPIhome.php" title="KPI">Website</a>


        </li>


        <li>


                <a href="KPIhome.php" title="KPI">Admin</a>


        </li>




        </ul>
    </div>
</div>

＆＃13;

Answer 3

const arraysList = myArray.reduce((acc, item, index) => {
    if ((index + 1) % 3 === 0) {
        acc.second.push(item);
    } else {
        acc.first.push(item);
    }
    return acc;
}, { first: [], second: [] })

console.log(arraysList.first); // [12, 11 18, 30, 21, 18]
console.log(arraysList.second); // [13, 51, 20]

您还可以创建新课程，并为所需背景添加rmm样式

如何在CSS中更改NavBar Color

3 个答案: