1

I am not really into all those coding terms, so I am having some difficulties to find answer to my problem. Usually I am just copy paste existing code and try to make some adjustments to what I want. Anyway I am working on a navigation menu on a one-page website. So till now that works. However, I want to have a sub-menu. I tried some things, but I cannot really get what I want. What I want is when I click on a menu item, the sub-menu opens and activate the first sub-menu item.

I found an example: http://inthe7heaven.com/fb-john-doe/dark/

The photo section. I tried to replicate that, but I think the sub-menu is connected to the filtering function of the photogallery.

Can anybody give me some guidance in this?

HTML

 <nav class="on_caption">
    <ul class="pagination">
        <li class="home current"><a href="#0">Home</a></li>
        <li class=""><a href="#1">About EJ</a></li>
        <li class=""><a href="#2">Services</a></li>
        <li class="photos">
            <a href="#3">Photos</a>
        <div id="filter" class="category_filter_list">
            <span class="active_link" id="all">All</span>
            <span id="cookies">Cookies</span>
            <span id="bread">Bread</span>
            <span id="baking">Baking</span>
        </div>
        </li>
        <li class=""><a href="#4">Classes</a></li>
        <!--<li class=""><a href="#5">Testimonials</a></li>-->
        <li class=""><a href="#6">Contact</a></li>
    </ul>
</nav>

CSS

    nav {   
       position: absolute;
       z-index: 999;
       right: 0;
       top: 0;
       width: 158px;
       height: 600px;
       display: block;
       overflow: hidden;
       behavior: url(js/PIE.htc);
    }

    nav.on_caption {
       background: rgba(20,11,19,.6);
       -pie-background: rgba(20,11,19,.6);
    }

nav.on_caption a {
       color: #d0ced0;
    }

    nav.off_caption {
       background: rgba(20,11,19,.08);
       -pie-background: rgba(20,11,19,.08);
    }

    nav.off_caption a {
       color: #524b51;
    }

    nav a {
       font-size: 1.143em;
       text-transform: uppercase;
    }

nav > a { 
       padding-left: 24px;
    }

    ul.pagination {
       margin: 0;
       padding: 0;
       padding-bottom: 8px;
       list-style:none;
    }

    ul.pagination li {
       margin: 0px 0px 0px 0px;
       clear: both;
       padding: 8px 10px 0px 24px;
       list-style: none;
    }

ul.pagination li:first-child {
       padding-top: 25px;
    }

    nav > a:hover, 
    nav ul.pagination li a:hover, 
    nav ul.pagination li.current a {
       color: #90705B;
    }

So I got this code based on the website I provided above. I want the same effect as in the photo section only then for a normal menu item that is not connected to a filter. That is, when the menu item is clicked, the menu gets extended with the sub-menu and the page goes to the first item in the sub-menu. In addition, the sub-menu item gets active.

4

3 に答える 3

0

グーグル"scrollto jquery"

これは簡単なものです

http://flesler.blogspot.in/2007/10/jqueryscrollto.html

于 2013-02-23T06:28:25.750 に答える
0

ツリーメニューを使用して、jsfiddle でサブメニューの展開と折りたたみを行うことができました。私はそれをjsfiddleでテストしましたが、そこで動作します。ただし、私のWebサイトでは機能しません。メニューは展開しません。私が使用している Web サイトは、単一ページの Web サイトです。したがって、メニュー項目はページ上のセクションを指しています。したがって、ページの 3 番目のセクションを指しているため、私の href="sub-1" は機能していないと思います。

これに対する簡単な回避策はありますか？派手な jquery エフェクトは必要ありません。開くだけで済みます。

さらに、親アイテムをクリックすると、サブメニューが展開され、最初のサブアイテムがアクティブになる必要があります。これどうやってするの？

HTML

<nav class="on_caption">
    <ul class="pagination">
        <li class="home current"><a href="#0">Home</a></li>
        <li class=""><a href="#1">About EJ</a></li>
        <li class=""><a href="#sub-1">Services</a>
            <ul id="sub-1">
                <li class=""><a href="#">Test</a></li>
                <li class=""><a href="#">Test</a></li>
            </ul>
        </li>
        <li class=""><a href="#3">Photos</a></li>
        <li class=""><a href="#4">Classes</a></li>
        <li class=""><a href="#6">Contact</a></li>
    </ul>                   
</nav>

CSS

.pagination > li ul {
    display: none;
}

.pagination > li ul:target {
    display: block;
}
于 2013-02-23T15:46:17.450 に答える
0

いくつかの進歩を遂げました。

HTML

<nav class="on_caption">
    <ul class="pagination">
        <li class="home current"><a href="#0">Home</a></li>
        <li class=""><a href="#1">About EJ</a></li>
        <li class=""><a href="#sub-1">Services</a>
            <ul id="sub-1">
                <li class=""><a href="#">Test</a></li>
                <li class=""><a href="#">Test</a></li>
            </ul>
        </li>
        <li class=""><a href="#3">Photos</a></li>
        <li class=""><a href="#4">Classes</a></li>
        <li class=""><a href="#6">Contact</a></li>
    </ul>                   
</nav>

CSS

.pagination > li ul {
    display: none;
}

jQuery

jQuery(
  function($)
  {
    $('.pagination a').click(function(){$(this).next('ul').toggle();});
  }
);

これで動作します。メニュー項目をクリックすると、サブメニューが拡張されます。ただし、別のメニュー項目がクリックされたときにサブメニューを再び折りたたむにはどうすればよいですか? また、メニュー項目がクリックされたときに、デフォルトでページが最初のサブメニュー項目に自動的に移動するようにするにはどうすればよいですか?

于 2013-02-24T00:23:08.830 に答える