HTML Abrir conteúdo dentro da própria página

[Klash]

Eae galera!

 

Estou querendo fazer uma dashboard, porém, como sou iniciante, estou com uma dificuldade.

Quero que quando clique em uma opção do menu, abra o conteúdo ao lado do menu.

 

Exemplo:

 

Cliquei em Notificações, o conteúdo irá aparecer do lado direito e o menu continuará ali.

 

 

 

Como posso fazer isso? Preciso que seja responsivo.

Estou utilizando bootstrap, html, css e php

 

Obrigado pela ajuda!

[Leonardo0308]

Bom dia @Klash

 

Tenho um link que talvez possa lhe ajudar Clique Aqui!

 

Espero ter lhe ajudado

 

[DiF]

@Klash Olá. 

 

Além da solução apresentada acima,  pode-se utilizar o ajax para fazer requisições assíncronas ao banco de dados para pegar os dados necessários e inserir no lugar onde quer.

 Digamos que isso seja o mais ideal para o tipo de coisa que você quer um "dashboard".

 

Recomendo você fazer uma ampla pesquisa de como usar o ajax com  jQuery e php.  Sugiro o jQuery por ser mais simples e prático para esse tipo de coisa.

[Klash]

Consegui fazer utilizando nav tabs do Bootstrap. Vou fazer menu superior mesmo.

 

Nav Tabs:

 

<ul class="nav nav-tabs justify-content-center" role="tablist">
			<a class="navbar-brand" href="#">LOGO</a>
		<li class="nav-item">
		  <a class="nav-link active" href="#profile" role="tab" data-toggle="tab">Cadastro</a>
		</li>
		<li class="nav-item">
		  <a class="nav-link" href="#buzz" role="tab" data-toggle="tab"><i class="fa fa-envelope mr-3"></i>Gerenciar</a>
		</li>
		<li class="nav-item dropdown">
			<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			  Dropdown
			</a>
			<div class="dropdown-menu" aria-labelledby="navbarDropdown">
				<a class="dropdown-item" href="#buzz" data-toggle="tab" >Action</a>
				<a class="dropdown-item" href="#references" data-toggle="tab">Another action</a>
				</div>
				</li>
		<li class="nav-item">
		  <a class="nav-link" href="#references" role="tab" data-toggle="tab">Dúvidas</a>
		</li>
		<li class="nav-item">
			<a class="nav-link" href="#references" role="tab" data-toggle="tab">Notificações</a>
		  </li>
		  <li class="nav-item">
			<a class="nav-link" href="#references" role="tab" data-toggle="tab">Sair</a>
		  </li>
	  </ul>
	  
	  <!-- Tab panes -->
	  <div class="tab-content">
		<div role="tabpanel" class="tab-pane fade in active" id="profile">CONTEÚDO 1</div>
		<div role="tabpanel" class="tab-pane fade" id="buzz">CONTEÚDO 2</div>
		<div role="tabpanel" class="tab-pane fade" id="references">CONTEÚDO 3</div>
	  </div>
	  </div>

Obrigado a todos.