Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

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.

HTML

            
              <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>
            
          
!

CSS

            
              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;
  	}
}

            
          
!

JS

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

});
            
          
!
999px

Console