0

縦型のワードプレスメニューを作成し、Jqueryコード（HTMLメニューの作成に使用されたインターネットから）を使用して、サブメニューを親の右側に表示しようとしています（現在は-に表示されています-画面。

これが私のメニューのCSSです：

/* First Level Menu */
#vert-menu li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font: bold 13px arial;
    width: 180px;
    }

#vert-menu li a {
    display: block;
    overflow: auto;
    color: orange;
    text-decoration: none;
    padding: 6px;
    border-bottom: 1px solid #000000;
    background-color: black;
    }

#vert-menu li a:link, #vert-menu li a:visited, #vert-menu li a:active {
    color: white;
    }

#vert-menu li a:hover {
    background-color:orange;
    color:white;
    }

/* End First Level Menu */

#vert-menu li ul a {
    display: block;
    overflow: auto;
    color: white;
    text-decoration: none;
    padding: 6px;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    }

#vert-menu li ul a:link, #vert-menu li ul a:visited, #vert-menu li ul a:active {
    background-color: orange;
    }

#vert-menu li ul a:hover {
    background-color:orange;
    color:white;
    }

#vert-menu li ul li {
    position: absolute;
    width: 180px;
    top: 0;
    visibility: hidden;
}

Jqueryコードまたはheader.phpファイルでの呼び出し方法に問題がある可能性があります。

JQueryは次のとおりです。

$("document").ready(function() {

// Function triggered when mouse hovers over a menu item
// Looking for a LI item that has a UL for a child element
// If it does trigger the function on mouseover
$('#vert-menu li a').parent().has('ul').mouseover(function() {

    // offset() returns the top & left relative position on the doc for LI
    tagOffset = $(this).offset();

    /* I use the following to get the tag name for this 
    getTagName = $(this).get(0).tagName;
    alert(getTagName); */

    // Get distance from the left for the LI
    offsetLeft = tagOffset.left;

    // Get distance from the top for the LI
    offsetTop = tagOffset.top;

    // Move the new popup 180px to the left (Width of parent UL) 
    popOutOffsetLeft = offsetLeft + 180;

    // Get the id for the first UL contained in the LI
    closeParent = $(this).closest("ul").attr("id");

    // Checking if the UL is a second level of third level popup menu
    if (closeParent == 'vert-menu')
    {
        // Make menu visible and move it into position on the document
        $(this).find('ul').first().css({'visibility' : 'visible', 'left' : popOutOffsetLeft + 'px', 'top' : offsetTop + 'px'});
    } else {
        // Find offset for the UL that surrounds the third level popup
        secondOffset = $(this).find('ul').last().parent().offset();

        // Subtract the top offset from the second menu to position properly
        secondOffsetTop = secondOffset.top - offsetTop;

        // Correct the positioning on offset left
        secondOffsetLeft = offsetLeft - 10;

        // Make menu visible and move it into position on the document
        $(this).find('ul').last().css({'visibility' : 'visible', 'left' : secondOffsetLeft + 'px', 'top' : secondOffsetTop + 'px'});
    }
});

// When the mouse moves off the menu hide everything
$('#vert-menu li a').parent().has('ul').mouseout(function() {
    $(this).find('ul').css({'visibility' : 'hidden'});
});

});

そして、ヘッダーファイルを間違えた場合に備えて、jqueryファイルの呼び出し方法は次のとおりです。

!-- BEGIN JS -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/superfish.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.scrollTo.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/scripts.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.tools.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.baseball-menu.js"></script>

こちらがメニューです

4

1 に答える 1

0

スタイルの最後にあるliを削除し、次のようにpadding：0を追加してみてください。

    #vert-menu li ul {
    position: absolute;
    width: 180px;
    top: 0;
    visibility: hidden;
    padding: 0;
   }

念のため、次のようなコードで同じことを行うことができます。

$("document").ready(function() {
  $('#vert-menu li a').parent().has('ul').hover(
        function () {$('ul', this).stop().show(500); },
        function () {$('ul', this).stop().hide(300); });
});

可視性を置き換えます：ディスプレイによって隠されています：上記のulにはありません。

1.7.2jqueryバージョンを使用しました

于 2013-02-16T03:44:59.077 に答える