responsive menubar dengan traisisi height

kamu butuh kopi

maksudnya transisi pas munculnya ? atau gmna gan

@Tayo ya transisi pas munculnya sama pas nyembunyiinya

Saya bingung :D ini ente buat menu apa ? menu materialize?,Dropdown,?

atau coba kasih screenshot contoh menunya :D

http://www.coalmarch.com/ itu linknya coba buka terus browser diresize jadi menunya ganti , tapi buatnya pake pure html css sama javascript gak pake jquery ato bootstrap ato materialize semoga bisa dipahami @Stivenktk Terima Kasih

Mungkin itu materialize css gan :D membuat 1 div buat menu nya pertama dia display none tapi saat gambar itu di click bisa pakai javascript maka rubah div itu jadi display block :D atau bisa pakai ide dropdown :D

materialize kan framework , maksudnya kalo buat gak pake framework gimana sedangkan kalo pake display gak bisa transisi height kalo pake dropdown itu caranya gimana semoga bisa dipahami @Stivenktk Terima Kasih

sabar kasih 1 hari buat berpikir dan test pake ide dropdown :D besok saya test buat :D ntar kalo bisa saya kasih source code nya ...

sip makasih @Stivenktk ditunggu codenya

1. CSS transition tidak berlaku untuk display none dan display block. 2. Sepertinya gk bisa kalau cuma css, cmiiw.

Solusi paling sering dipake itu bisanya untuk div menu ada class tambahannya. Saat menu ketutup >> <div class="menu"> Saat menu kebuka >> <div class="menu active"> atau <div class="menu open">

Di css nya nanti.

.menu {
 height: 0;
 transition: 0.3s;
 }
.menu.active {
 height: 200px;
 }

Cuma contoh sederhananya aja karena nanti harus dikembangin lagi. Nah masalahnya buat nambahin class active nya ke div menu perlu javascript/jquery. alternatif lain kalau gk mau pakai javasciprt adalah pakai :hover, jadi nanti tinggi menunya berubah setelah ada event mouse over di atas menunya. Masalahnya mouse over tidak berlaku/tidak ada di mobile browser. So balik lagi, paling bagus pakai jquery, jquery nya jg sederhana kok.

$(".menu").click(function() {
 $(".menu").addClass("active");
});

@rendyfebry itu kan pas .menu.active dikasih stylenya dari awal 200px , kalo .menu.activenya gak dikasih style dari awal ambil langsung pas eksekusi program , jadi kalo misal di menunya ditambahin menu gak usah otak atik cssnya yang .menu.active height:200px diubah jadi .menu.active height:misal jadi 250px , jadi .menu.active dapet heightnya relatif tergantung dari isinya bukan kita tentukan dari awal heightnya , juga ada transisi height , tapi menurut saya kalo pake jquery loading page jadi sedikit lebih lama karena kita memanggil semua fungsi jquery padahal yang kita pake cuma sedikit kan gak efektif , jadi kalo pure javascript aja itu bagaimana mohon bantuanya Terima Kasih

Udah di bilang itu cuma basic. Itu konsepnya.

var menu = document.getElementById("menu");
menu.classList.add("active");

Google is your friend men... http://www.w3schools.com/jsref/prop_element_classlist.asp

akhirnya ane nemu , semoga bisa dipahami HTML

<nav id="nav">
			<div class="logo">
				<a href="#">LOGO</a>
			</div>
			<div class="menu-mobile" onclick="cross(this)">
				<div class="bar1"></div>
				<div class="bar2"></div>
				<div class="bar3"></div>
			</div>
			<div class="menu" id="menu_container">
				<ul id="menu_content">
					<li id="menu-item-1"><a href="#header">HOME</a></li>
					<li id="menu-item-2"><a href="#features">FEATURE</a></li>
					<li id="menu-item-3"><a href="#showcase">SHOWCASE</a></li>
					<li id="menu-item-4"><a href="#pricing">PRICING</a></li>
					<li id="menu-item-5"><a href="#contact">CONTACT</a></li>
				</ul>
			</div>
		</nav>

CSS

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	 border: 0;
  margin: 0;
  padding: 0;
}
nav{
	float: left;
	width: 100%;
	line-height: 30px;
	background: #2c3e50;
	padding: 60px 7.5%;
	transition: all 500ms;
	position: fixed;
	top: 0;
	z-index: 100;
}
nav.scroll{
	padding: 25px 7.5%;
}
nav a{color: white;}
nav div.logo{
	float: left;
	font-size: 20px;
}
nav div.menu{
	float: right;
	overflow: hidden;
}
nav div.menu ul{
	float: left;
	width: 100%;
	margin-top: 0px;
	overflow: hidden;
}
nav div.menu li{
	float: left;
	margin: auto 30px;
	font-size: 14px;
	overflow: hidden;
}
nav div.menu li a{
	transition: all 500ms;
	color: #D9D9D9;
}
nav div.menu li a:hover , nav div.menu li.nav-active a{
	color: #2ecc71;
}
.menu-mobile {
    cursor: pointer;
	display: none;
	float: right;
}
.bar1, .bar2, .bar3 {
    width: 20px;
    height: 3px;
    background-color: white;
    margin: 3px 0;
    transition: 0.4s;
}
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-4px, 4px);
    transform: rotate(-45deg) translate(-4px, 4px);
}
.change .bar2 {
    opacity: 0;
}
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-4px, -4px);
    transform: rotate(45deg) translate(-4px, -4px);
}
@media screen and (max-width:780px) {
	.menu-normal{
		transition: all 1s;
		opacity: 0;
		height: 0px;
		width: 0px;
		overflow: hidden;
		padding: 0;
	}
	nav div.menu{
		width: 100%;
		height: 0px;
		transition: all 500ms;
		padding-left: 15px;
	}
	nav div.menu li{
		width: 100%;
		margin: 10px 0;
	}
	.menu-mobile{
		display: inline-block;
		margin-top: 4px;
	}
}

JS

<script type="text/javascript">
			var menu_container = document.getElementById("menu_container");
			var menu_content = document.getElementById("menu_content");
			function cross(x) {
				x.classList.toggle("change");
				var menu_height_container = menu_container.offsetHeight;
				var menu_height_content = menu_content.offsetHeight;
				if (menu_container.style.height > "0px") {
					menu_container.style.height = "0px";
					menu_container.style.margin = "0px";
				}  else {
					menu_container.style.height = menu_height_content + "px";
					menu_container.style.margin = "15px 0px 0px 0px";
				}
			}
			menu_resize();
			window.onresize = function() {
				menu_resize();
			}
			function menu_resize() {
				if (window.innerWidth > 780) {
					menu_container.style.height = "auto";
				}
				else {
					menu_container.style.height = "0px";
				}
			}

			window.onscroll = function() {scroll()};

			function scroll() {
				if (document.body.scrollTop > 110 || document.documentElement.scrollTop > 110) {
					document.getElementById("nav").classList.add("scroll");
				} else {
					document.getElementById("nav").classList.remove("scroll");
				}
                        }
</script>

semoga bisa dipahami Terima kasih

@rendyfebry makasih saranya

Function cross(x) dan function menu_resize() coba dirubah. Sebisa mungkin jangan mengubah css dari dalam javascript.

Konsep nya sama dengan class active tadi.

sip makasih saranya @rendyfebry emang kenapa kalo mengubah css dari javascript ?

"Jorok" dan tidak efisien.

1. Misalkan 1 element perlu dirubah 5 property css nya, lebar, tinggi, background color, font-color dan besar huruf. Kalau langsung ganti property css di js berapa line JS nya? kalau cuma ganti nambah class nya di js, berapa line js nya?

2. Kalau ada 10 element yg harus dirubah bersamaan dalam 1 klik, harus berapa line js kalau dirubah langsung propery css nya vs cuma nambahin div nya.

bener juga sih @rendyfebry , tapi kalo pake toggle class cara dapet height secara dinamis / relatif dari elemenya bagaimana ?

Terima Kasih

mungkin kalau pake jquery seperti ini gan. untuk widthnya sesuain aja

makasih saranya @Tayo

nih gan yg pake javascript tapi height nya kita yg tentuin. kalau height pk auto gk ada transisinya

Kalau di bootstrap dia pakai 3 state/kondisi, tutup, sedang membuka, terbuka. Atau kalau pakai class nya bootstrap, collapse, collapsing dan collapsed in.

Silahkan buka situs yg menggunakan bootstrap, buka dalam keadaan mobile view di chrome dev, klik2 dan amati apa yang terjadi di div navigation bar saat menu tertutup, sedang membuka dan terbuka.

Makasih saranya @Tayo dan @rendyfebry