123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="wrap">
  <div class="header">
    <div class="logo"></div>
    <ul class="menu">
      <li><a href="#">選單一</a></li>
      <li><a href="#">選單二</a></li>
      <li><a href="#">選單三</a></li>
      <li><a href="#">選單四</a></li>
      <li><a href="#">選單五</a></li>
      <li><a href="#" target="_blank">選單六</a></li>
      <li><a href="#">選單七</a></li>
    </ul>
    <a href="#" class="showmenu">menu</a>
  </div>
  <div class="content">
    <p>
      其際出後心術者,風高動;自觀民發富面大年了夜使開懷布,福大會士是全:軍傷子頭新:已起職別客晚方好沒感她是預學。能的陽話經是他麼行五河進計分學嗎都了王創想?片始現化主反過家你與;顯理所名角車下化當影城士有:展很進全色獨水久人,式著斷給,海希手林心立軍、運取早集在港家外隊平有青,們得打形心的了以城為不即小去型,力的道……因不上字失起要易國助可和個觀高的又春非雄只法年個字。有是只我上都道化體、旅黨小綠天洲領般,一任標綠來起,制試安一國……視對與喜名度說,你的不這修配輕!
    </p>
    <p>
      一笑馬臺動,一越曾間持青排的爭為但道性。住出子。了這等呢組羅我;更記好。價了望要最,文上老類電來近雄好是電帶也生理不,產在各器解是西小不理再統老以的;預操和來愛月企什較大其來來下了,對師同,在成程舉我?
    </p>
    <p>
      望樣斯溫園長,體是確所。在白管,快樹員義油方係係?操那中還一。期之加個然少去說身會草,跑比向女孩情業王多,向以不音人不個向,想加山轉時:師小級觀?發過這重同書,跟試場消麼裡外什所影在名就檢特藥去表談同電聞期不題之。
    </p>
  </div>
</div>
            
          
!
            
              body{
  background: #0F222B;
  color: #69CA62;
}
a{
  color: #69CA62;
  text-decoration: none;
}
.wrap{
	max-width: 960px;
	margin: 0 auto;
}
.header{
	height: 80px;
	border-bottom: 1px solid #69CA62;
	position: relative;
}
.logo{
	float: left;
	width: 50px;
	height: 50px;
	background: #69CA62;
	border: 3px solid green;
}
.menu{
	float: right;
}
.menu li{
	float: left;
}
.menu li a{
	display: block;
	color: #69CA62;
	text-decoration: none;
	padding: 1em;
}
.content{
	padding: 1em;
	line-height: 1.8;
}
.content p{
	margin-bottom: 1em;
}
/*在PC上隱藏漢堡選單*/
.showmenu{
	display: none;
}
@media (max-width: 768px) {
	.menu{
		/*隱藏選單開始*/
		max-height: 0;
		overflow: hidden;
		/*隱藏選單結束*/
		/*漸變效果*/
    	transition: max-height 2.3s;
    	margin-top: 1px;
    	/*絕對定位疊在網頁上*/
    	position: absolute;
    	/*權重*/
    	z-index: 100;
    	/*header 80px+1px boder 線條*/
    	top: 81px;
    	/* left:0 right:0表示滿版 */
    	left: 0;
   		right: 0;
    	background: #0F222B;
	}
	.menu li{
		float: none;
		border-bottom: 1px dashed #69CA62;
	}
	.menu li a{
    	transition: all 0.3s;
  	}
	.menu li a:hover{
    	background: #69CA62;
    	color: #fff;
  	}
	.showmenu{
    	display: block;
    	float: right;
    	margin: 1em;
  	}
  	/*jQuery點擊後動態在 body 加上 class */
  	.menu-show .menu{
  		max-height: 500px;
  	}
}

            
          
!
            
              $(document).ready(function() {
	$('.showmenu').on('click', function(event) {
		event.preventDefault();
		$('body').toggleClass('menu-show');
	});

});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console