Prof. Anderson Burnes profburnes

## criando_menu_resposivo_sem_javascript.md

      
              3 files
            
          
              0 forks
            
          
              2 comments
            
          
              6 stars
            
          
                profburnes
                / criando_menu_resposivo_sem_javascript.md
            
            
              Last active
              May 6, 2023 23:39
            
              
                Criando Menu Responsivo sem Javascript
              
          
    Criando um Menu Responsivo sem Javascript

Criar menus responsivos com CSS 3 JavaScrit não é uma tarefa difícil, ainda mais se voc utilizar o jQuery. Mas e se voc não tiver conhecimentos em JavaScript? Vou ensinar um meio básico e simples de fazer um menu responsivo sem a ajuda de JS, utilizando apenas CSS e HTML. O Menu não ficará aquelas coisas, lindo, porém ficará funcional e se você possui conhecimentos em CSS poderá adicionar formatação e até animações ao mesmo.
O HTML

Vou criar um menu com listas em um elemento nav para começar, a formatação fica por sua conta, aqui vai uma bem simples, acompanhando o exemplo. Utilizei o Font-Awesome para utilizar o ícone do menu responsivo. Vamos ao HEAD:
<!DOCTYPE html>


## sw.js
//nome do cache
var cacheName = 'akiexpress';

//arquivos a serem cacheados
var filesToCache = [
  "index.html",
  "categoria.html",
  "carrinho.html",
  "produto.html",
  "imgs/logo.png",

## cache.manifest
CACHE MANIFEST
js/jquery-3.2.1.min.js
js/materialize.js

## formatar_valores.js
//forma simples de formatar valores

function formatar(valor) {

	valor = valor.replace(".","");
	return parseFloat(valor.replace(",","."));

}


## htaccess
RewriteEngine on
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^(.*)$ index.php?param=$1
	//nome do cache
	var cacheName = 'akiexpress';

	//arquivos a serem cacheados
	var filesToCache = [
	"index.html",
	"categoria.html",
	"carrinho.html",
	"produto.html",
	"imgs/logo.png",
	//forma simples de formatar valores

	function formatar(valor) {

	valor = valor.replace(".","");
	return parseFloat(valor.replace(",","."));

	}
	RewriteEngine on
	RewriteCond %{SCRIPT_FILENAME} !-f
	RewriteCond %{SCRIPT_FILENAME} !-d
	RewriteRule ^(.*)$ index.php?param=$1