Pure-CSS/YUI垂直多級菜單

我正在嘗試爲響應式佈局使用純CSS框架。我喜歡他們的垂直菜單，但我不知道如何添加下拉（摺疊）子菜單。Pure-CSS/YUI垂直多級菜單

我甚至不能在其網站上橫向菜單例子在這裏工作： http://purecss.io/menus/#add-dropdowns-to-menus

垂直菜單是我採用純爲我的項目的主要原因，現在我卡住了。

此處每馬修的要求是html頁面的代碼。包括所有的代碼和鏈接，這樣您可以在最快的理解瀏覽器加載...

<!doctype html> 
<html lang="en"> 
<head> 

<!-- This page uses PURE CSS. See documentation at http://purecss.io/ --> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<!-- For HTML5, place favicon.ico and apple-touch-icon(s) in the root directory --> 

<!--Add PURE Base, which essentially is built-in Normalize.css, 
    an HTML5-ready CSS reset with minimal styling. --> 
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css"> 

<!--Add style for vertical menu. --> 
    <!--[if lte IE 8]> 
     <link rel="stylesheet" href="http://purecss.io/combo/1.11.5?/css/layouts/side-menu-old-ie.css"> 
    <![endif]--> 
    <!--[if gt IE 8]><!--> 
     <link rel="stylesheet" href="http://purecss.io/combo/1.11.5?/css/layouts/side-menu.css"> 
    <!--<![endif]--> 

<!--Add yui for second-level menu support. --> 
<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>  


</head> 
<body> 

<div id="layout"> 
    <!-- Menu toggle --> 
    <a href="#menu" id="menuLink" class="menu-link"> 
     <!-- Hamburger icon --> 
     <span></span> 
    </a> 

    <div id="menu"> 
     <div class="pure-menu pure-menu-open"> 
      <a class="pure-menu-heading" href="#">Company</a> 

      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 

       <li class="menu-item-divided pure-menu-selected"> 
        <a href="#">Services</a> 
       </li> 

       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 

    <div id="main"> 
     <div class="header"> 
      <h1>Page Title</h1> 
      <h2>A subtitle for your page goes here</h2> 
     </div> 

     <div class="content"> 
      <h2 class="content-subhead">The Layout</h2> 
      <p> 
       This is the basic "Side Bar" page design I want to customize. I got it from the Pure CSS <a href="http://purecss.io/layouts/" target="_blank">Layouts page</a>. 
      </p> 


      <h2 class="content-subhead">Horizontal Menu Example</h2> 
<p>Following is the example <a href="http://purecss.io/menus/#add-dropdowns-to-menus" target="_blank">from Pure CSS Menus page</a> for adding drop-down to horizontal menu:</p> 

<div id="demo-horizontal-menu"> 
    <ul id="std-menu-items"> 
     <li class="pure-menu-selected"><a href="#">Flickr</a></li> 
     <li><a href="#">Messenger</a></li> 
     <li><a href="#">Sports</a></li> 
     <li><a href="#">Finance</a></li> 
     <li> 
      <a href="#">Other</a> 
      <ul> 
       <li class="pure-menu-heading">More from Yahoo!</li> 
       <li class="pure-menu-separator"></li> 
       <li><a href="#">Autos</a></li> 
       <li><a href="#">Flickr</a></li> 
       <li><a href="#">Answers</a></li> 
       <li> 
        <a href="#">Even More</a> 
        <ul> 
         <li><a href="#">Horoscopes</a></li> 
         <li><a href="#">Games</a></li> 
         <li><a href="#">Jobs</a></li> 
         <li><a href="#">OMG</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

<!-- Script for adding drop-down. --> 
<script> 
YUI({ 
    classNamePrefix: 'pure' 
}).use('gallery-sm-menu', function (Y) { 

    var horizontalMenu = new Y.Menu({ 
     container   : '#demo-horizontal-menu', 
     sourceNode  : '#std-menu-items', 
     orientation  : 'horizontal', 
     hideOnOutsideClick: false, 
     hideOnClick  : false 
    }); 

    horizontalMenu.render(); 
    horizontalMenu.show(); 

}); 
</script> 


<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p style="color:garnet; font-weight:bold;">I am trying to learn how to add the above submenu functionality to Pure's vertical menu, which displays on the left side of this page.</p> 


     </div> 
    </div> 
</div> 

</body> 
<!-- Script to make vertical menu responsive. --> 
<script src="http://purecss.io/combo/1.11.5?/js/ui.js"></script> 
</html>

來源

2014-04-30 jake905

您應考慮添加代碼，顯示你已經嘗試過，所以我們能看到你可能得到什麼卡住 –

大約有風格爲垂直導航，使其尷尬（溢出-Y必須的幾個問題被刪除以允許任何子導航顯示）。

<!doctype html> 
<html lang="en"> 
<head> 

<!-- This page uses PURE CSS. See documentation at http://purecss.io/ --> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

<!-- For HTML5, place favicon.ico and apple-touch-icon(s) in the root directory --> 

<!--Add PURE Base, which essentially is built-in Normalize.css, 
    an HTML5-ready CSS reset with minimal styling. --> 
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css"> 

<!--Add yui for second-level menu support. --> 
<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>  
<style> 
body { 
    color: #777; 
} 

.pure-img-responsive { 
    max-width: 100%; 
    height: auto; 
} 

/* 
Add transition to containers so they can push in and out. 
*/ 
#layout, 
#menu, 
.menu-link { 
    -webkit-transition: all 0.2s ease-out; 
    -moz-transition: all 0.2s ease-out; 
    -ms-transition: all 0.2s ease-out; 
    -o-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out; 
} 

/* 
This is the parent `<div>` that contains the menu and the content area. 
*/ 
#layout { 
    position: relative; 
    padding-left: 0; 
} 
    #layout.active { 
     position: relative; 
     left: 150px; 
    } 
     #layout.active #menu { 
      left: 150px; 
      width: 150px; 
     } 

     #layout.active .menu-link { 
      left: 150px; 
     } 
/* 
The content `<div>` is where all your content goes. 
*/ 
.content { 
    margin: 0 auto; 
    padding: 0 2em; 
    max-width: 800px; 
    margin-bottom: 50px; 
    line-height: 1.6em; 
} 

.header { 
    margin: 0; 
    color: #333; 
    text-align: center; 
    padding: 2.5em 2em 0; 
    border-bottom: 1px solid #eee; 
} 
    .header h1 { 
     margin: 0.2em 0; 
     font-size: 3em; 
     font-weight: 300; 
    } 
    .header h2 { 
     font-weight: 300; 
     color: #ccc; 
     padding: 0; 
     margin-top: 0; 
    } 

.content-subhead { 
    margin: 50px 0 20px 0; 
    font-weight: 300; 
    color: #888; 
} 



/* 
The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that 
appears on the left side of the page. 
*/ 

#menu { 
    margin-left: -150px; /* "#menu" width */ 
    width: 150px; 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    z-index: 1000; /* so the menu or its navicon stays above all content */ 
    background: #191818; 
    -webkit-overflow-scrolling: touch; 
} 
    /* 
    All anchors inside the menu should be styled like this. 
    */ 
    #menu a { 
     color: #999; 
     border: none; 
     padding: 0.6em 0 0.6em 0.6em; 
    } 

    /* 
    Remove all background/borders, since we are applying them to #menu. 
    */ 
    #menu .pure-menu, 
    #menu .pure-menu ul { 
     border: none; 
     background: transparent; 
    } 

    /* 
    Add that light border to separate items into groups. 
    */ 
    #menu .pure-menu ul, 
    #menu .pure-menu .menu-item-divided { 
     border-top: 1px solid #333; 
    } 
     /* 
     Change color of the anchor links on hover/focus. 
     */ 
     #menu .pure-menu li a:hover, 
     #menu .pure-menu li a:focus { 
      background: #333; 
     } 

    /* 
    This styles the selected menu item `<li>`. 
    */ 
    #menu .pure-menu-selected, 
    #menu .pure-menu-heading { 
     background: #1f8dd6; 
    } 
     /* 
     This styles a link within a selected menu item `<li>`. 
     */ 
     #menu .pure-menu-selected a { 
      color: #fff; 
     } 

    /* 
    This styles the menu heading. 
    */ 
    #menu .pure-menu-heading { 
     font-size: 110%; 
     color: #fff; 
     margin: 0; 
    } 

#menu .pure-menu-children { 
    background: #191818; 
} 

/* -- Dynamic Button For Responsive Menu -------------------------------------*/ 

/* 
The button to open/close the Menu is custom-made and not part of Pure. Here's 
how it works: 
*/ 

/* 
`.menu-link` represents the responsive menu toggle that shows/hides on 
small screens. 
*/ 
.menu-link { 
    position: fixed; 
    display: block; /* show this only on small screens */ 
    top: 0; 
    left: 0; /* "#menu width" */ 
    background: #000; 
    background: rgba(0,0,0,0.7); 
    font-size: 10px; /* change this value to increase/decrease button size */ 
    z-index: 10; 
    width: 2em; 
    height: auto; 
    padding: 2.1em 1.6em; 
} 

    .menu-link:hover, 
    .menu-link:focus { 
     background: #000; 
    } 

    .menu-link span { 
     position: relative; 
     display: block; 
    } 

    .menu-link span, 
    .menu-link span:before, 
    .menu-link span:after { 
     background-color: #fff; 
     width: 100%; 
     height: 0.2em; 
    } 

     .menu-link span:before, 
     .menu-link span:after { 
      position: absolute; 
      margin-top: -0.6em; 
      content: " "; 
     } 

     .menu-link span:after { 
      margin-top: 0.6em; 
     } 


/* -- Responsive Styles (Media Queries) ------------------------------------- */ 

/* 
Hides the menu at `48em`, but modify this based on your app's needs. 
*/ 
@media (min-width: 48em) { 

    .header, 
    .content { 
     padding-left: 2em; 
     padding-right: 2em; 
    } 

    #layout { 
     padding-left: 150px; /* left col width "#menu" */ 
     left: 0; 
    } 
    #menu { 
     left: 150px; 
    } 

    .menu-link { 
     position: fixed; 
     left: 150px; 
     display: none; 
    } 

    #layout.active .menu-link { 
     left: 150px; 
    } 
} 

</style> 

</head> 
<body> 

<div id="layout"> 
    <!-- Menu toggle --> 
    <a href="#menu" id="menuLink" class="menu-link"> 
     <!-- Hamburger icon --> 
     <span></span> 
    </a> 

    <div id="menu"> 
     <div class="pure-menu pure-menu-open"> 
      <a class="pure-menu-heading" href="#">Company</a> 

      <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 

       <li class="menu-item-divided pure-menu-selected"> 
        <a href="#">Services</a> 

         <ul> 
          <li class="pure-menu-heading">Sub Nav Heading</li> 
          <li class="pure-menu-separator"></li> 
          <li><a href="#">Sub 1</a></li> 
          <li><a href="#">Sub 2</a></li> 

          <li> 
           <a href="#">Sub 3</a> 
          </li> 

          <li><a href="#">Sub 4</a></li> 
         </ul> 
       </li> 

       <li><a href="#">Contact</a> 
      </li> 
      </ul> 
     </div> 
    </div> 

    <div id="main"> 
     <div class="header"> 
      <h1>Page Title</h1> 
      <h2>A subtitle for your page goes here</h2> 
     </div> 

     <div class="content"> 
      <h2 class="content-subhead">The Layout</h2> 
      <p> 
       This is the basic "Side Bar" page design I want to customize. I got it from the Pure CSS <a href="http://purecss.io/layouts/" target="_blank">Layouts page</a>. 
      </p> 



<!-- Script for adding drop-down. --> 
<script> 
YUI({ 
    classNamePrefix: 'pure' 
}).use('gallery-sm-menu', function (Y) { 

    var horizontalMenu = new Y.Menu({ 
     container   : '#menu', 
     sourceNode  : '#menu > .pure-menu > ul', 
     orientation  : 'vertical', 
     hideOnOutsideClick: false, 
     hideOnClick  : false 
    }); 

    horizontalMenu.render(); 
    horizontalMenu.show(); 

}); 
</script> 


<p>&nbsp;</p> 
<p>&nbsp;</p> 
<p style="color:garnet; font-weight:bold;">I am trying to learn how to add the above submenu functionality to Pure's vertical menu, which displays on the left side of this page.</p> 


     </div> 
    </div> 
</div> 

</body> 
<!-- Script to make vertical menu responsive. --> 
<script src="http://purecss.io/combo/1.11.5?/js/ui.js"></script> 
</html>

來源

2014-04-30 22:06:02 PottyBert

PottyBert，就不得不更加認真地學習，看你做了什麼，但它是一個重大的進步。我實際上曾希望子菜單以手風琴的形式直接落在下面。如果這不是yui支持的選項，我完全理解並會考慮其他解決方案。一直在考慮將Bootstrap作爲這種類型功能的更強大的產品。 – jake905

這是完全可能的，因爲YUI只是javascript，但它取決於你想要的特定功能。 sm-menu是YUI庫中的用戶貢獻菜單，作爲Y.MenuNav Node插件的替代品。 – PottyBert

想一想，你可能很容易用sm-menu實現，只需改變菜單打開類的樣式，並使子導航不能絕對定位 – PottyBert

Pure-CSS/YUI垂直多級菜單

回答

相關問題