1

私は Mootools と Jquery を使用しており、遭遇できるすべてのソリューションを試しましたが、何も機能しません。

ドロップダウンメニューはMootools、ギャラリーはjQueryを使用しています。以前にこのコンボを使用し、noconflict ルールを使用して解決しましたが、今回は何も機能していないようです。

ライブ デモ:テスト サイト

ドロップダウン メニューは、ホーム リンクとポートフォリオ リンクにあります。

元のコードを掲載しました。jQuery を $ に戻したので、すべてを新鮮に見ることができます。

問題は、ドロップダウンが機能することですが、想定どおりに機能せず、適用する必要がある css スタイルが機能しません。ドロップダウンは、ギャラリーが存在しない他のすべてのページで完璧に機能します。

これはコードです：

    <!DOCTYPE html>
<html><!-- InstanceBegin template="/Templates/renee.dwt" codeOutsideHTMLIsLocked="false" --><head>
    <meta content="charset=utf-8">
    <!-- InstanceBeginEditable name="doctitle" -->
    <title>Renee Mc Magh Marketing</title>
    <!-- InstanceEndEditable -->
    <link href="css/reneeMcMagh.css" rel="stylesheet" type="text/css">

<link href="css/MenuMatic.css" rel="stylesheet" type="text/css">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript">

// BeginOAWidget_Shared_2241022
google.load("mootools", "1.4");
// EndOAWidget_Shared_2241022
</script>
<script src="js/MenuMatic_0.68.3.js" type="text/javascript"></script>
<style type="text/css">




/* BeginOAWidget_Instance_2241022: #nav */
a:link{
    color: #FFFFFF;
    font-weight: normal;
    font-family: "Century Gothic";
    font-size: 16px;
    text-transform: capitalize;
 }

a:visited{
    color: #FFFFFF;
    font-weight: normal;
    font-family: inherit;
    font-size: inherit;
}
/* all menu links */
#nav a, #subMenusContainer a{
    text-decoration: none;
    display: block;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    border: none;
    padding-top: 7px;
    padding-right: 20px;
    padding-bottom: 16px;
    padding-left: 20px;
    background-color: transparent;
    /* [disabled]border-bottom-left-radius: 5px; */
    /* [disabled]border-bottom-right-radius: 5px; */
}

/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#nav a{
    margin:0;
    float:left; 
}

/* Just sub menu links */
#subMenusContainer a, #nav li li a{
    text-align: left;
    font-family: "century gothic";
    font-size: 14px;
    /* [disabled]width: 200px; */
    background-color: #56D7FE;
    color: #FFF;
}

/* All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
    background-color: #321414;
    color: #FFFFFF;
}

/* sub menu links on hover or focus */
#subMenusContainer a:hover, 
#subMenusContainer a:focus, 
#nav a.mainMenuParentBtnFocused, 
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:hover,
#nav li a:focus{
    background-color: transparent;
    color: #FFFFFF;
}

/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* All ULs and OLs */
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol { 
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1em;
}

/* All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
    /*border around submenu goes here*/  
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border: none;
    left: 0px;
    background-color: #56D7FE;
    /* [disabled]width: 210px; */
}

/* List items in main menu --[for non-javascript users this applies to submenus as well]  */
#nav li { 
    /*great place to use a background image as a divider*/
    display:block;
    list-style:none;
    position:relative;
    float:left;
}

#subMenusContainer li{
    list-style: none;
    /* [disabled]padding-top: 7px; */
}

#subMenusContainer li:hover{
    background-color: #333333;
}

/* main menu ul or ol elment */
#nav{
    display: block;
    list-style: none;
    z-index: 5;
    display: block;
    position: relative;
    width: 410px;
    margin-top: -7px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

#subMenusContainer{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 0;
    overflow: visible;
    z-index: 1000000000;
    background-color: #321414;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.smOW{
    display: none;
    position: absolute;
    overflow: hidden;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    /* [disabled]background-color: #56D7FE; */
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: -2px;
    padding-top: 0;
    padding-right: 0px;
    padding-bottom: 0;
    padding-left: 0px;
}

/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
#nav li li{ float:none; }

#nav li li a{ /* Just submenu links*/   
    position:relative;
    float:none;
}

#nav li ul { /* second-level lists */
    position: absolute;
    width: auto;
    margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    margin-top: 2.8em;
}

/* third-and-above-level lists */
#nav li ul ul { margin: -1em 0 0 -1000em; }
#nav li:hover ul ul {   margin-left: -1000em; }

 /* lists nested under hovered list items */
#nav li:hover ul{   margin-left: 0; }
#nav li li:hover ul {   margin-left: 10em; margin-top:-2.5em;}

/* extra positioning rules for limited noscript keyboard accessibility */
#nav li a:focus + ul {  margin-left: 0; margin-top:2.2em; }
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
#nav li li a:focus {left:0;  margin-left:1000em; width:10em;  margin-top:0;}
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em;  margin-top:-1em;}
#nav li:hover a:focus{ margin-left: 0; }
#nav li li:hover a:focus + ul { margin-left: 10em; }

/* EndOAWidget_Instance_2241022 */
#apDiv1 {
    position: absolute;
    width: 200px;
    height: 115px;
    z-index: 6;
}
</style>
<script type="text/xml">
<!--
<oa:widgets>
  <oa:widget wid="2241022" binding="#nav" />
</oa:widgets>
-->
</script>
<script type="text/javascript">
// BeginOAWidget_Instance_2241022: #nav


        window.addEvent('domready', function() {            
            var myMenu = new MenuMatic({
                id:"nav",
                effect: "slide",
                duration: "600",
                hideDelay: "1000",
                matchWidthMode: "true",
                orientation: "horizontal",
                direction:{ x: 'right', y: 'down' },
                opacity: 95
            });
        }); 

// EndOAWidget_Instance_2241022
  </script>

 <script>
   jQuery.noConflict();
</script>

    <!-- InstanceBeginEditable name="head" -->
    <link rel="stylesheet" href="css/galleriffic-2.css" type="text/css" />

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

        <script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script><!-- We only want the thunbnails to display when javascript is disabled -->
        <script type="text/javascript">
            document.write('<style>.noscript { display: none; }</style>');
        </script>
    <!-- InstanceEndEditable -->

</head>

<body>
<div id="marketing"><img src="images/marketingBranding.png" width="200" height="51"></div>
<div id="Header">
  <div id="logo"> 
    <table width="150" border="0" align="right" cellpadding="5" cellspacing="5">
      <tr>
        <td height="160"><a href="https://www.facebook.com/pages/Renee-McMagh-Marketing/172159979492476" target="new"><img src="images/facebook.png" width="150" height="150"></a></td>
        <td><a href="https://twitter.com/ReneeMcMagh" target="new"><img src="images/twitter.png" width="150" height="150"></a></td>
        <td><a href="http://www.linkedin.com/pub/renee-mcmagh-taylor/28/8a7/2a0" target="new"><img src="images/linkedin.png" width="150" height="150"></a></td>
      </tr>
    </table>
  </div>
</div>
<div id="navigation">
<div id="navigation_container">
  <ul id="nav">

        <li><a href="index.html">Home</a>
        <ul>
          <li><a href="history.html">history/Highlights</a></li>
                <li><a href="business.html">business&nbsp;ethos/Principles</a></li>
          </ul></li>
        <li><a href="services.html">services</a></li>
        <li><a href="#">portfolio</a>
            <ul>
                <li><a href="logo_design.html">Logo Design</a></li>
                <li><a href="stationary.html">Brand Pack</a></li>
                <li><a href="branding.html">Branding/Marketing</a></li>
                <li><a href="website_designs.html">Website Designs</a></li>
          </ul> </li>           
        <li><a href="contact.html">Let's Chat</a></li>
  </ul>
  </div>
</div>
<div id="breadcrums">You are here: <a href="about.html">Home</a> <img src="img/arrow_right.gif" width="10" height="8"><!-- InstanceBeginEditable name="EditRegion5" -->Portfolio <img src="img/arrow_right.gif" width="10" height="8"><a href="website_designs.html">Web Design</a><!-- InstanceEndEditable --></div>
<div id="content">
  <!-- InstanceBeginEditable name="EditRegion3" -->
  <h1>Web Design</h1>
  <h2> Be on the WORLD WIDE WEB </h2>
  <p>&nbsp;</p>
  <div>
    <!-- Start Advanced Gallery Html Containers -->
    <div id="gallery" class="content">
      <div id="controls" class="controls"></div>
      <div class="slideshow-container">
        <div id="loading" class="loader"></div>
        <div id="slideshow" class="slideshow"></div>
      </div>
      <div id="caption" class="caption-container"></div>
    </div>
    <div id="thumbs" class="navigation">
      <ul class="thumbs noscript">
        </li>
        <li> <a class="thumb" href="gallery/websites/slides/casavalde.png" title="Casavalde"> <img src="gallery/websites/thumbs/Casavalde.jpg" alt="Casavalde" width="120" height="83" /></a> </li>
        <li> <a class="thumb" href="gallery/websites/slides/cemblocks.png" title="Cemblocks"> <img src="gallery/websites/thumbs/Cemblocks.jpg" alt="Cemblocks" width="120" height="83" /></a> </li>
        <li> <a class="thumb" href="gallery/websites/slides/cocoon.png" title="Cocoon"> <img src="gallery/websites/thumbs/Cocoon.JPG" alt="Cocoon" width="120" height="83" /></a> </li>
        <li> <a href="gallery/websites/slides/credit-online.png" title="Credit Online" class="thumb"> <img src="gallery/websites/thumbs/Credit Online.jpg" alt="Credit on line" width="120" height="83" /></a> </li>
        <li> <a href="gallery/websites/slides/DeWetDeVilliers.png" title="De Wet De Villiers" class="thumb"> <img src="gallery/websites/thumbs/De Wet De Villiers.jpg" alt="De Wet De Villiers" width="120" height="83" /></a> </li>
        <li> <a href="gallery/websites/slides/edgeSport.png" title="Edge Sport" class="thumb"> <img src="gallery/websites/thumbs/Edge Sport.jpg" alt="Edge Sport" width="120" height="83" /></a> </li>
        <li> <a href="gallery/websites/slides/embroidereze.png" title="Embroidereze" class="thumb"> <img src="gallery/websites/thumbs/Embroidereze.jpg" alt="Embroiderze" width="120" height="83" /></a> </li>
        <li> <a href="gallery/websites/slides/FBMining.png" title="FB Mining" class="thumb"> <img src="gallery/websites/thumbs/FB-Mining.JPG" alt="FB Mining" width="120" height="83" /></a> </li>
        <li> <a href="gallery/websites/slides/foodworx.png" title="Foodworx" class="thumb"> <img src="gallery/websites/thumbs/Foodworx.jpg" alt="Foodworx" width="120" height="83" /></a> </li>
        <li> <a href="gallery/websites/slides/GreenHabitat.png" title="Green Habitat" class="thumb"> <img src="gallery/websites/thumbs/Green Habitat.jpg" alt="Green Habitat" width="120" height="83" /></a> </li>
        <li> <a href="gallery/websites/slides/hi-parts.png" title="Hi Parts & Hydraulics" class="thumb"> <img src="gallery/websites/thumbs/Hi Parts & Hydraulics.jpg" alt="Hi Parts &amp; Hydraulics" width="120" height="83" /></a> </li>
        <li> <a href="gallery/websites/slides/jRaath.png" title="J Raath" class="thumb"> <img src="gallery/websites/thumbs/J-Raath.jpg" alt="J Raath" width="120" height="83" /></a> </li>
        <li> <a href="gallery/websites/slides/Medi-Care.png" title="Medicare" class="thumb"> <img src="gallery/websites/thumbs/Medicare.JPG" alt="Medicare" width="120" height="83" /></a> </li>
        <li> <a href="gallery/websites/slides/paramount.png" title="Paramount" class="thumb"> <img src="gallery/websites/thumbs/Paramount.jpg" alt="Paramount" width="120" height="83" /></a> </li>
         <li> <a href="gallery/websites/slides/NWLitho.png" title="Paramount" class="thumb"> <img src="gallery/websites/thumbs/nwlitho.jpg" alt="Paramount" width="120" height="83" /></a> </li>
          <li> <a href="gallery/websites/slides/maricoMeats.png" title="Paramount" class="thumb"> <img src="gallery/websites/thumbs/maricomeats.JPG" alt="Paramount" width="120" height="83" /></a> </li>
      </ul>
    </div>
    <div style="clear: both;"></div>
  </div>
  <p>&nbsp;</p>
  <!-- InstanceEndEditable --></div> <div id="footer_nav"> <div align="right" class="first" id="menu">
      <ul>
        <li><a href="about.html">Home</a></li>
        <li><a href="services.html">services</a></li>
        <li><a href="website_designs.html">portfolio</a></li>
        <li><a href="contact.html">Let's Chat</a></li>
      </ul>
    </div></div>
<div id="footer">
  <h6>Marketing with Attitude</h6>
  <p> Copyright &copy; 2013 Renee McMagh Marketing  | All rights reserved</p>
</div>
<!-- InstanceBeginEditable name="footer" -->
<script type="text/javascript">
jQuery(document).ready(function($) {
                // We only want these styles applied when javascript is enabled
                $('div.navigation').css({'width' : '300px', 'float' : 'left'});
                $('div.content').css('display', 'block');

                // Initially set opacity on thumbs and add
                // additional styling for hover effect on thumbs
                var onMouseOutOpacity = 0.67;
                $('#thumbs ul.thumbs li').opacityrollover({
                    mouseOutOpacity:   onMouseOutOpacity,
                    mouseOverOpacity:  1.0,
                    fadeSpeed:         'fast',
                    exemptionSelector: '.selected'
                });

                // Initialize Advanced Galleriffic Gallery
                var gallery = $('#thumbs').galleriffic({
                    delay:                     2500,
                    numThumbs:                 10,
                    preloadAhead:              15,
                    enableTopPager:            true,
                    enableBottomPager:         true,
                    maxPagesToShow:            7,
                    imageContainerSel:         '#slideshow',
                    controlsContainerSel:      '#controls',
                    captionContainerSel:       '#caption',
                    loadingContainerSel:       '#loading',
                    renderSSControls:          true,
                    renderNavControls:         true,
                    playLinkText:              'Play Slideshow',
                    pauseLinkText:             'Pause Slideshow',
                    prevLinkText:              'Previous Photo',
                    nextLinkText:              'Next Photo',
                    nextPageLinkText:          'Next',
                    prevPageLinkText:          'Prev',
                    enableHistory:             false,
                    autoStart:                 false,
                    syncTransitions:           true,
                    defaultTransitionDuration: 900,
                    onSlideChange:             function(prevIndex, nextIndex) {
                        // 'this' refers to the gallery, which is an extension of $('#thumbs')
                        this.find('ul.thumbs').children()
                            .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                            .eq(nextIndex).fadeTo('fast', 1.0);
                    },
                    onPageTransitionOut:       function(callback) {
                        this.fadeTo('fast', 0.0, callback);
                    },
                    onPageTransitionIn:        function() {
                        this.fadeTo('fast', 1.0);
                    }
                });
            });
</script>
<!-- InstanceEndEditable -->

</body>
<!-- InstanceEnd --></html>
4

1 に答える 1

0

jQuery のライブラリは、呼び出したときにまだロードされていないjQuery.noConflict();ため、コンソールで最初のエラーが発生します。そのコード行を jQuery のライブラリ スクリプトの後に変更します。

于 2013-11-08T10:54:51.397 に答える