Criar uma barra lateral animada usando HTML, CSS e JavaScript
Aprenda a criar uma barra lateral personalizada do zero com um recurso de alternância usando tecnologias da Web.
Neste artigo, apresentarei um passo a passo para implementar uma barra lateral com animação suave para seu aplicativo da web. Por padrão, a barra lateral está visível, você pode alterná-la usando um botão e recolher ou expandir a seção de visualização à direita.
3 etapas para criar uma barra lateral personalizada
- Adicione o HTML para a barra lateral
- Adicionar estilos CSS para a barra lateral
- Adicionar JavaScript para expandir ou recolher a barra lateral
Abra seu projeto em seu editor de texto preferido e adicione o seguinte trecho de código ao bodyelemento. Observe que há dois blocos HTML no trecho de código abaixo. Um tem um ID chamado mySidebar, e o outro tem um ID chamado main. O conteúdo da barra lateral residirá dentro do elemento com o ID mySidebar. Já o elemento com o ID mainarmazenará o conteúdo que será exibido no lado direito da página de visualização.
Etapa 2: adicionar estilos CSS à barra lateral
Agora, adicione uma folha de estilo CSS ao aplicativo que adicionará efeitos visuais ou animações à barra lateral. Crie um arquivo chamado sidebar.csse coloque-o em um diretório de acordo com a estrutura do seu projeto e vincule-o à headseção do seu aplicativo.
<link rel="stylesheet" href="sidebar.css">
Etapa 3: adicionar JavaScript para expandir ou recolher a barra lateral
Agora, adicione um arquivo JavaScript ao aplicativo que permitirá que o recurso mostre ou oculte a barra lateral. Crie um arquivo chamado sidebar.jse coloque-o em um diretório de acordo com a estrutura do seu projeto e vincule-o à headseção do seu aplicativo.
<script src="sidebar.js"></script>
Resultado
Parabéns! Você concluiu o aprendizado de como criar sua barra lateral recolhível personalizada usando tecnologias da web. Vá em frente e crie barras laterais impressionantes, personalizando-as conforme sua necessidade e poste as capturas de tela na seção de comentários.
Se você gostou de ler este post e achou útil para você, por favor, aplauda, compartilhe com seus amigos e siga-me para receber atualizações sobre meus próximos posts. Você pode se conectar comigo no LinkedIn .
Suggested posts
Aprender na semana de trabalho é mais importante do que você pensa
Muitas vezes nos encontramos lutando para implementar o que sabemos que é bom para nós. Desde dizer a um outro significativo que o amamos até lembrar de falar como um pirata, sempre haverá quem afirme que um dia, semana ou mês de eventos não é necessário porque eles já estão fazendo essas coisas.
Related posts
Criando um ambiente de trabalho seguro
“Ele vai me proteger quando eu estiver em perigo. Ele me esconderá em sua tenda.
Financiando a remoção de carbono no FY24
A divisão das solicitações de apropriações da Carbon180 em todos os caminhos
Por Alyson Lee, consultor administrativo de assuntos governamentais O processo de apropriações anuais do governo federal é fundamental para nossos esforços para financiar a remoção de dióxido de carbono (CDR). Todos os anos, a Carbon180 envia solicitações a vários escritórios do Congresso para ajudar a orientar para onde os dólares do próximo ano irão fluir.
A arte é sempre apolítica?
Ontem, fechamos a porta do Festival Eurovisão da Canção deste ano com uma brilhante e caótica grand finale, onde a cantora sueca Loreen levou para casa o troféu, tornando-se a primeira mulher a vencer duas vezes e trazendo a coroa de volta para a Suécia 50 anos depois que o ABBA venceu a competição com “Waterloo”. Eles se tornaram um dos maiores artistas do cânone da música pop.
A lenta erosão: revelando como as pessoas desperdiçam em suas carreiras
No mundo acelerado e competitivo de hoje, a carreira desempenha um papel significativo no crescimento pessoal, na estabilidade financeira e na satisfação geral com a vida. No entanto, muitos indivíduos encontram-se presos em um ciclo implacável de estagnação e insatisfação, definhando gradualmente em suas vidas profissionais.