cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              
	<!-- conteudo principal do site -->
	<div class="container">
		
		<header class="header">
			<a class="logo" href="http://wtricks.com.br" title="Wtricks Tutoriais">
				<img src="http://cdn.wtricks.com.br/images-theme/logo.png" alt="Wtricks Tutoriais" width="200px">
			</a>

			<h1 class="titulo-site">» Menu responsivo com CSS e JS «</h1>

			<!-- Inicio do menu -->
			<nav class="nav">
				<ul class="nav-list">
					<li class="nav-item"><a href="#" title="Home">Home</a></li>
					<li class="nav-item"><a href="#" title="Sobre">Sobre</a></li>
					<li class="nav-item"><a href="#" title="Serviços">Serviços</a></li>
					<li class="nav-item"><a href="#" title="Clientes">Clientes</a></li>
					<li class="nav-item"><a href="#" title="Contatos">Contatos</a></li>
				</ul>
			</nav>
			<!-- fim do menu -->

		</header> <!-- final do header -->

		<section id="principal">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod delectus neque cupiditate blanditiis, aliquam maxime laudantium aspernatur quis voluptas inventore quasi dolores, possimus error! Provident odit, beatae excepturi ullam numquam.</p>
			<p>Necessitatibus, hic. Impedit repudiandae quo amet reprehenderit quae atque veniam modi, architecto. Laudantium, cumque, hic esse quas praesentium tenetur. Omnis at saepe, obcaecati quae quaerat nisi. Ducimus suscipit hic soluta.</p>
			<p>Amet ipsa quos similique, consequuntur, quisquam qui repudiandae! Harum officiis atque veniam maiores necessitatibus aliquam aspernatur quisquam facere nam, magnam perferendis et illum dolorum, quaerat ea aperiam magni officia id.</p>
			<p>Odio repudiandae quaerat quasi perferendis nulla nihil tenetur, minima beatae molestiae dolore praesentium cumque fuga possimus officia pariatur! Consequuntur fugiat laboriosam, pariatur architecto deleniti perferendis voluptates repellendus, voluptatibus et beatae.</p>
			<p>Dolorum iste at iusto unde beatae inventore nobis placeat omnis, commodi consectetur quibusdam porro repellendus neque est illum velit. Veritatis, necessitatibus eos? Sunt iusto, asperiores voluptatum, quod totam repudiandae reprehenderit!</p>
		</section>
	</div> <!-- Final do container -->
            
          
!
            
              * {
	margin:  0;
	padding:  0;
	box-sizing: border-box;
}

body {
	background:  #ecf0f1;
	font-family: 'Dosis', sans-serif;
	font-size: 1vw;
	border-top:  8px solid #ffc600;	
	color: #333;
}

.container {
	width: 100%;
	margin: 0 auto;
	padding: 0 30px;
}
	@media (min-width: 960px) {
		.container {
			width: 960px;
			padding: 0;
		}
	}

/* estilo do header */
.header {
}
	.logo {
		display: block;
		width: 200px;
		margin: 20px auto;
		margin-top: 28px;
	}	

	.titulo-site {
		width: 100%;
		text-align: center;
		font-size: 5vw;
		text-transform: uppercase;
		padding: 10px;
	}
		@media (min-width: 768px) {
			.titulo-site {
				font-size: 3vw;
			}
		}

/* estilo do menu */
.nav {
	position: relative;
	display: inline-block;
	font-size: 1.6vw;
	font-weight: 700;
	width: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
	.nav-list {

	}
		.nav-item {
			float: left;
			*display:  inline;
			zoom: 1;
			list-style: none;
		}
			.nav-item a {
				display: block;
				padding:  15px 20px;
				text-decoration: none;
				color: #000;
				background: #ffc600;	
			}
				.nav-item:last-child a {
					border-radius: 0 5px 5px 0;
				}

				.nav-item a:hover {
					background: #ffab1c;
				}

	/* Menu responsivo tags adcionada no javaScript */
	.nav-mobile {
		display: none;
		cursor:  pointer;
		position: absolute;
		top:  0;
		left: 0;
		background: #ffc600;
		border-radius: 5px;
		line-height: 50px;
		width: 100%;
		height: 50px;
	} 
		.nav-mobile:after {
			content: "↓ ABRIR MENU";
		}

	.nav-active {
		display: block !important;
		margin-top: 50px;
	}

	.nav-mobile-open {
		border-radius: 5px 5px 0 0;
	}
		.nav-mobile-open:after {
			content:  "↑ FECHAR MENU";
		}

/* Menu responsivo */
@media (max-width: 480px) {
	.nav-item:first-child a {
		border-radius: 0 !important;
	}
}

@media (min-width: 480px) {
	
	.nav-mobile {
		left: 50%;
		width: 300px;
		margin-left: -150px;
	}

	.nav-item:first-child a {
		border-radius: 5px 0 0 5px;
	}
}

@media (max-width: 768px) {
	.nav {
		font-size: 5vw;
		min-height: 50px;
	}
		.nav-list {
			width: 100%;
			display: none;
		}
			.nav-item {
				width: 100%;
				float: none;
				border-top:  1px solid #FFCF00;
			}
				.nav-item:first-child a {
					border-radius: 5px 5px 0 0;
				}

				.nav-item:last-child a {
					border-radius: 0 0 5px 5px;
				}

	/* Deixa o menu mobile visivel só para celulares e tablets */
	.nav-mobile {
		display: block;
	}
}



#principal {
	margin-top:  30px;
}
	#principal p {
		font-size: 3.5vw;
		margin-top: 20px;
	}
		@media (min-width: 768px) {
			#principal p {
				font-size: 1.6vw;
			}
		}























            
          
!
            
              /*! apollo.js v1.7.0 | (c) 2014 @toddmotto | https://github.com/toddmotto/apollo */
!function(n,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t:n.apollo=t()}(this,function(){"use strict";var n,t,s,e,o={},c=function(n,t){"[object Array]"!==Object.prototype.toString.call(n)&&(n=n.split(" "));for(var s=0;s<n.length;s++)t(n[s],s)};return"classList"in document.documentElement?(n=function(n,t){return n.classList.contains(t)},t=function(n,t){n.classList.add(t)},s=function(n,t){n.classList.remove(t)},e=function(n,t){n.classList.toggle(t)}):(n=function(n,t){return new RegExp("(^|\\s)"+t+"(\\s|$)").test(n.className)},t=function(t,s){n(t,s)||(t.className+=(t.className?" ":"")+s)},s=function(t,s){n(t,s)&&(t.className=t.className.replace(new RegExp("(^|\\s)*"+s+"(\\s|$)*","g"),""))},e=function(e,o){(n(e,o)?s:t)(e,o)}),o.hasClass=function(t,s){return n(t,s)},o.addClass=function(n,s){c(s,function(s){t(n,s)})},o.removeClass=function(n,t){c(t,function(t){s(n,t)})},o.toggleClass=function(n,t){c(t,function(t){e(n,t)})},o});

(function () {

	// cria um novo elemento
	var mobile = document.createElement('div');

	// adiciona uma classe ao novo elemento
	mobile.className = 'nav-mobile';

	// coloca a nova tag no codigo fonte
	document.querySelector('.nav').appendChild(mobile);

	// seleciona a nav-mobile no codigo fonte
	var mobileNav = document.querySelector('.nav-mobile');

	// seleciona o nav-list
	var toggle = document.querySelector('.nav-list');

	mobileNav.onclick = function() {
		apollo.toggleClass(mobileNav, 'nav-mobile-open');
		apollo.toggleClass(toggle, 'nav-active');
	}

})();
            
          
!
999px
Loading ..................

Console