Q&Aこちらのサイトを参考にレスポンシブデザインのメニューを入れたのですがフォントカラーや背景色の変え方がわかりません
どこをいじれば変えられますでしょうか。
https://share-life.biz/web/responsive-menu/
jquery
1(function ($) { 2 "use strict"; 3 $.fn.meanmenu = function (options) { 4 var defaults = { 5meanMenuTarget: jQuery(this), // Target the current HTML markup you wish to replace 6meanMenuContainer: 'body', // Choose where meanmenu will be placed within the HTML 7meanMenuClose: "X", // single character you want to represent the close menu button 8meanMenuCloseSize: "18px", // set font size of close button 9meanMenuOpen: "<span /><span /><span />", // text/markup you want when menu is closedmeanRevealPosition: "right", // left right or center positions 10meanRevealPositionDistance: "0", // Tweak the position of the menu 11meanRevealColour: "", // override CSS colours for the reveal background 12meanScreenWidth: "480", // set the screen width you want meanmenu to kick in at 13meanNavPush: "", // set a height here in px, em or % if you want to budge your layout now the navigation is missing. 14meanShowChildren: true, // true to show children in the menu, false to hide them 15meanExpandableChildren: true, // true to allow expand/collapse children 16meanExpand: "+", // single character you want to represent the expand for ULs 17meanContract: "-", // single character you want to represent the contract for ULs 18meanRemoveAttrs: false, // true to remove classes and IDs, false to keep them 19onePage: false, // set to true for one page sites 20meanDisplay: "block", // override display method for table cell based layouts e.g. table-cell 21removeElements: "" // set to hide page elements 22 }; 23 options = $.extend(defaults, options); 24 25 // get browser width 26 var currentWidth = window.innerWidth || document.documentElement.clientWidth; 27 28 return this.each(function () { 29var meanMenu = options.meanMenuTarget; 30var meanContainer = options.meanMenuContainer; 31var meanMenuClose = options.meanMenuClose; 32var meanMenuCloseSize = options.meanMenuCloseSize; 33var meanMenuOpen = options.meanMenuOpen; 34var meanRevealPosition = options.meanRevealPosition; 35var meanRevealPositionDistance = options.meanRevealPositionDistance; 36var meanRevealColour = options.meanRevealColour; 37var meanScreenWidth = options.meanScreenWidth; 38var meanNavPush = options.meanNavPush; 39var meanRevealClass = ".meanmenu-reveal"; 40var meanShowChildren = options.meanShowChildren; 41var meanExpandableChildren = options.meanExpandableChildren; 42var meanExpand = options.meanExpand; 43var meanContract = options.meanContract; 44var meanRemoveAttrs = options.meanRemoveAttrs; 45var onePage = options.onePage; 46var meanDisplay = options.meanDisplay; 47var removeElements = options.removeElements; 48 49//detect known mobile/tablet usage 50var isMobile = false; 51if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i)) || (navigator.userAgent.match(/Blackberry/i)) || (navigator.userAgent.match(/Windows Phone/i)) ) { 52isMobile = true; 53} 54 55if ( (navigator.userAgent.match(/MSIE 8/i)) || (navigator.userAgent.match(/MSIE 7/i)) ) { 56// add scrollbar for IE7 & 8 to stop breaking resize function on small content sites 57 jQuery('html').css("overflow-y" , "scroll"); 58} 59 60var meanRevealPos = ""; 61var meanCentered = function() { 62if (meanRevealPosition === "center") { 63var newWidth = window.innerWidth || document.documentElement.clientWidth; 64var meanCenter = ( (newWidth/2)-22 )+"px"; 65meanRevealPos = "left:" + meanCenter + ";right:auto;"; 66if (!isMobile) { 67jQuery('.meanmenu-reveal').css("left",meanCenter); 68} else { 69jQuery('.meanmenu-reveal').animate({ 70left: meanCenter 71}); 72} 73} 74}; 75 76var menuOn = false; 77var meanMenuExist = false; 78 79if (meanRevealPosition === "right") { 80meanRevealPos = "right:" + meanRevealPositionDistance + ";left:auto;"; 81} 82if (meanRevealPosition === "left") { 83meanRevealPos = "left:" + meanRevealPositionDistance + ";right:auto;"; 84 } 85// run center function 86meanCentered(); 87 88// set all styles for mean-reveal 89var $navreveal = ""; 90var meanInner = function() { 91// get last class name 92if (jQuery($navreveal).is(".meanmenu-reveal.meanclose")) { 93$navreveal.html(meanMenuClose); 94} else { 95$navreveal.html(meanMenuOpen); 96} 97}; 98 99// re-instate original nav (and call this on window.width functions) 100var meanOriginal = function() { 101jQuery('.mean-bar,.mean-push').remove(); 102jQuery(meanContainer).removeClass("mean-container"); 103jQuery(meanMenu).css('display', meanDisplay); 104menuOn = false; 105meanMenuExist = false; 106jQuery(removeElements).removeClass('mean-remove'); 107}; 108 109// navigation reveal 110var showMeanMenu = function() { 111var meanStyles = "background:"+meanRevealColour+";color:"+meanRevealColour+";"+meanRevealPos; 112if (currentWidth <= meanScreenWidth) { 113jQuery(removeElements).addClass('mean-remove'); 114meanMenuExist = true; 115// add class to body so we don't need to worry about media queries here, all CSS is wrapped in '.mean-container' 116jQuery(meanContainer).addClass("mean-container"); 117jQuery('.mean-container').prepend('<div class="mean-bar"><a href="#nav" class="meanmenu-reveal" style="'+meanStyles+'">Show Navigation</a><nav class="mean-nav"></nav></div>'); 118//push meanMenu navigation into .mean-nav 119var meanMenuContents = jQuery(meanMenu).html(); 120jQuery('.mean-nav').html(meanMenuContents); 121 122// remove all classes from EVERYTHING inside meanmenu nav 123if(meanRemoveAttrs) { 124jQuery('nav.mean-nav ul, nav.mean-nav ul *').each(function() { 125// First check if this has mean-remove class 126if (jQuery(this).is('.mean-remove')) { 127jQuery(this).attr('class', 'mean-remove'); 128} else { 129jQuery(this).removeAttr("class"); 130} 131jQuery(this).removeAttr("id"); 132}); 133} 134 135// push in a holder div (this can be used if removal of nav is causing layout issues) 136jQuery(meanMenu).before('<div class="mean-push" />'); 137jQuery('.mean-push').css("margin-top",meanNavPush); 138 139jQuery(meanMenu).hide(); 140jQuery(".meanmenu-reveal").show(); 141 142// turn 'X' on or off 143jQuery(meanRevealClass).html(meanMenuOpen); 144$navreveal = jQuery(meanRevealClass); 145 146//hide mean-nav ul 147jQuery('.mean-nav ul').hide(); 148 149// hide sub nav 150if(meanShowChildren) { 151// allow expandable sub nav(s) 152if(meanExpandableChildren){ 153jQuery('.mean-nav ul ul').each(function() { 154if(jQuery(this).children().length){ 155jQuery(this,'li:first').parent().append('<a class="mean-expand" href="#" style="font-size: '+ meanMenuCloseSize +'">'+ meanExpand +'</a>'); 156} 157}); 158jQuery('.mean-expand').on("click",function(e){ 159e.preventDefault(); 160if (jQuery(this).hasClass("mean-clicked")) { 161jQuery(this).text(meanExpand); 162jQuery(this).prev('ul').slideUp(300, function(){}); 163} else { 164jQuery(this).text(meanContract); 165jQuery(this).prev('ul').slideDown(300, function(){}); 166} 167jQuery(this).toggleClass("mean-clicked"); 168}); 169} else { 170jQuery('.mean-nav ul ul').show(); 171} 172} else { 173jQuery('.mean-nav ul ul').hide(); 174} 175 176// add last class to tidy up borders 177jQuery('.mean-nav ul li').last().addClass('mean-last'); 178$navreveal.removeClass("meanclose"); 179jQuery($navreveal).click(function(e){ 180e.preventDefault(); 181if( menuOn === false ) { 182$navreveal.css("text-align", "center"); 183$navreveal.css("text-indent", "0"); 184$navreveal.css("font-size", meanMenuCloseSize); 185jQuery('.mean-nav ul:first').slideDown(); 186menuOn = true; 187} else { 188jQuery('.mean-nav ul:first').slideUp(); 189menuOn = false; 190} 191$navreveal.toggleClass("meanclose"); 192meanInner(); 193jQuery(removeElements).addClass('mean-remove'); 194}); 195 196// for one page websites, reset all variables... 197if ( onePage ) { 198jQuery('.mean-nav ul > li > a:first-child').on( "click" , function () { 199jQuery('.mean-nav ul:first').slideUp(); 200menuOn = false; 201jQuery($navreveal).toggleClass("meanclose").html(meanMenuOpen); 202}); 203} 204} else { 205meanOriginal(); 206} 207}; 208 209if (!isMobile) { 210// reset menu on resize above meanScreenWidth 211jQuery(window).resize(function () { 212currentWidth = window.innerWidth || document.documentElement.clientWidth; 213if (currentWidth > meanScreenWidth) { 214meanOriginal(); 215} else { 216meanOriginal(); 217} 218if (currentWidth <= meanScreenWidth) { 219showMeanMenu(); 220meanCentered(); 221} else { 222meanOriginal(); 223} 224}); 225} 226 227jQuery(window).resize(function () { 228// get browser width 229currentWidth = window.innerWidth || document.documentElement.clientWidth; 230 231if (!isMobile) { 232meanOriginal(); 233if (currentWidth <= meanScreenWidth) { 234showMeanMenu(); 235meanCentered(); 236} 237} else { 238meanCentered(); 239if (currentWidth <= meanScreenWidth) { 240if (meanMenuExist === false) { 241showMeanMenu(); 242} else { 243meanOriginal(); 244} 245 246}); 247 248// run main menuMenu function on load 249showMeanMenu(); 250}); 251 }; 252})(jQuery);
回答2件
0
jsではなくcssでは？
ブラウザの開発ツールから変更したい要素の所定のクラスを見つけて
おそらくそのクラスがmeanmenu.cssにあるはずなのでそのクラスに対してカラーをあてれば良いと思います。
投稿2017/09/26 21:50
総合スコア80850
0
質問文に記載すると字数制限がオーバーしてしまうのでこちらに記載させて頂きます。
meanmenu
1 2/*! ####################################################################### 3 4MeanMenu 2.0.7 5-------- 6 7To be used with jquery.meanmenu.js by Chris Wharton (http://www.meanthemes.com/plugins/meanmenu/) 8 9####################################################################### */ 10 11/* hide the link until viewport size is reached */ 12a.meanmenu-reveal { 13display: none; 14} 15 16.pc-menu{color:#F0F0F0;} 17 18/* when under viewport size, .mean-container is added to body */ 19.mean-container .mean-bar { 20float: left; 21width: 100%; 22position: relative; 23background: #0c1923; 24padding: 4px 0; 25min-height: 42px; 26z-index: 999999; 27} 28 29 30 31.mean-container a.meanmenu-reveal { 32width: 22px; 33height: 22px; 34padding: 13px 13px 11px 13px; 35position: absolute; 36top: 0; 37right: 0; 38cursor: pointer; 39color: #fff; 40text-decoration: none; 41font-size: 16px; 42text-indent: -9999em; 43line-height: 22px; 44font-size: 1px; 45display: block; 46font-family: Arial, Helvetica, sans-serif; 47font-weight: 700; 48} 49 50.mean-container a.meanmenu-reveal span { 51display: block; 52background: #fff; 53height: 3px; 54margin-top: 3px; 55} 56 57.mean-container .mean-nav { 58float: left; 59width: 100%; 60background: #0c1923; 61margin-top: 44px; 62} 63 64.mean-container .mean-nav ul { 65padding: 0; 66margin: 0; 67width: 100%; 68list-style-type: none; 69} 70 71.mean-container .mean-nav ul li { 72position: relative; 73float: left; 74width: 100%; 75} 76 77.mean-container .mean-nav ul li a { 78display: block; 79float: left; 80width: 90%; 81padding: 1em 5%; 82margin: 0; 83text-align: left; 84color: #fff; 85border-top: 1px solid #383838; 86border-top: 1px solid rgba(255,255,255,0.5); 87text-decoration: none; 88text-transform: uppercase; 89} 90 91.mean-container .mean-nav ul li li a { 92width: 80%; 93padding: 1em 10%; 94border-top: 1px solid #f1f1f1; 95border-top: 1px solid rgba(255,255,255,0.25); 96opacity: 0.75; 97filter: alpha(opacity=75); 98text-shadow: none !important; 99visibility: visible; 100} 101 102.mean-container .mean-nav ul li.mean-last a { 103border-bottom: none; 104margin-bottom: 0; 105} 106 107.mean-container .mean-nav ul li li li a { 108width: 70%; 109padding: 1em 15%; 110} 111 112.mean-container .mean-nav ul li li li li a { 113width: 60%; 114padding: 1em 20%; 115} 116 117.mean-container .mean-nav ul li li li li li a { 118width: 50%; 119padding: 1em 25%; 120} 121 122.mean-container .mean-nav ul li a:hover { 123background: #252525; 124background: rgba(255,255,255,0.1); 125} 126 127.mean-container .mean-nav ul li a.mean-expand { 128margin-top: 1px; 129width: 26px; 130height: 32px; 131padding: 12px !important; 132text-align: center; 133position: absolute; 134right: 0; 135top: 0; 136z-index: 2; 137font-weight: 700; 138background: rgba(255,255,255,0.1); 139border: none !important; 140border-left: 1px solid rgba(255,255,255,0.4) !important; 141border-bottom: 1px solid rgba(255,255,255,0.2) !important; 142} 143 144.mean-container .mean-nav ul li a.mean-expand:hover { 145background: rgba(0,0,0,0.9); 146} 147 148.mean-container .mean-push { 149float: left; 150width: 100%; 151padding: 0; 152margin: 0; 153clear: both; 154} 155 156.mean-nav .wrapper { 157width: 100%; 158padding: 0; 159margin: 0; 160} 161 162/* Fix for box sizing on Foundation Framework etc. */ 163.mean-container .mean-bar, .mean-container .mean-bar * { 164-webkit-box-sizing: content-box; 165-moz-box-sizing: content-box; 166box-sizing: content-box; 167} 168 169 170.mean-remove { 171display: none !important; 172}
投稿2017/09/28 13:57
総合スコア27
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/27 14:45
2017/09/27 21:27
2017/09/27 21:54
2017/09/29 22:09
2017/09/29 22:13