weeblyのアコーディオンメニュー

-2

こんにちは私はWeebly Proを使用しています。私はアコーディオンのサイドバーを作る方法を学びたいと思います。現在、メニューの隣にサブメニューが表示され、大きな混乱が生じます。weeblyのアコーディオンメニュー

が、これは私のウェブサイトである： www.exceptyebeconverted.com私はもっとこのような何かをしたいと思います

：www.excatholicsforchrist.com

は、私はいくつかの極端な助けを必要としています。私はGoogleとYouTubeを検索して助けを求めていて、それを理解するのに十分なものはありませんでした。それが私がここにいる理由です。このコードを編集してアコーディオン効果を得るにはどうすればよいですか？ HTMLも変更する必要がありますか？それは私がページレイアウトを変更することを意味しますか？この次

<body class="wsite-theme-light short-header-page"> 
<div id="container"> 
    <div id="sidebar"> 
     {logo} 
     <div id="avmenu">{menu}</div> 
    </div> 
    <div id="main-wrap"> 
     <div id="header"> 
      <table id="header-right"> 
       <tr> 
        <td> 
         <table> 
          <tr> 
           <td class="phone-number">{phone:text}</td> 
           <td class="social">{social}</td> 
           <td class="search">{search}</td> 
          </tr> 
         </table> 
        </td> 
       </tr> 
      </table> 
      <div style="clear:both"></div> 
     </div> 
     <div id="banner"> 
      <div class="wsite-header"></div> 
     </div> 
     <div id="main"> 
      <div id="content">{content}</div> 
      <div id="footer">{footer}</div> 
     </div> 
    </div> 
    <div style="clear:both;"></div> 
</div> 
</body> 

/* side-nav 
--------------------------------------------------------------------------------*/ 

#avmenu { 
    clear: left; 
    margin: 70px 0 0; 
    padding: 0; 
} 

#avmenu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

#avmenu li { 
    list-style: none; 
} 

#avmenu li a { 
    font-weight: 400; 
    text-decoration: none; 
    color: #fff; 
    font-family: "Lato", Arial, Helvetica, sans-serif; 
    font-size: 15px; 
    display: block; 
    line-height: 1; 
    margin: 0; 
    padding: 10px 5px 10px 14px; 
    border-bottom: 1px solid #903f3f; 
} 

#avmenu ul > li:last-child a, 
#avmenu ul > span:last-child li a { 
    border-bottom: none; 
} 

#avmenu li#active a, 
#avmenu a:hover { 
    color: #fff; 
    background: #903f3f; 
} 

/* Navigation Drop-Down Menu Customization 
--------------------------------------------------------------------------------*/ 

#wsite-menus .wsite-menu { 
    border-top: 1px solid #903f3f; 
    position: relative; 
    top: -1px; 
} 

#wsite-menus .wsite-menu li a { 
    padding: 8px; 
    background: #903f3f; 
    border: none; 
    border-bottom: 1px solid #bd5353; 
    text-decoration: none; 
    font-family: Arial, Helvetica, sans-serif; 
    color: #fff; 
} 

#wsite-menus .wsite-menu li a:hover { 
    color: #fff; 
    background: #723131; 
}

出典

2016-03-20 Brandon Potter

試してみてください。

https://www.youtube.com/watch?v=gLy3vaIhyKAまた

、これはjQueryのを使用しているので、https://jqueryui.com/accordion/とhttp://www.jqueryrain.com/example/jquery-accordion/

出典

2016-03-20 14:17:20

おかげでこのdoesnのように使用できる他のjQueryベースのアコーディオンウィジェットが存在します助けて –

私はあなたがCSSを配置参照してください。私たちが手伝ってくれるようにHTMLも置いてください。 https://jsfiddle.net/を使用して、自分の持っているものを表示することができます。 –

ありがとうございます。私はその上にhtmlを追加しました。 –

weeblyのアコーディオンメニュー

答えて

関連する問題