Desenvolvimento FRONT-END I
CSS - MENU
Professor: Charles Bastos
Slide 04
charlesbastos@[Link]
Página: 1
Sumário
❑ Lista não-ordenada
❑ Lista ordenada
❑ Propriedades list-style-position.
❑ PSEUDO-CLASSES
❑ Menu
Página: 2
1. CSS Lista não-ordenada
❑ Lista não-ordenada: <ul> - Propriedades list-style-type.
Sintaxe: Resposta:
Utilização:
<ul>
<li style="list-style-type: disc">Lista com disc</li>
<li style="list-style-type: square">Lista com square</li>
<li style="list-style-type: circle">Lista com circle</li>
</ul>
Página: 3
1. CSS Lista ordenada
❑ Lista ordenada: <ol> - Propriedades list-style-type.
Sintaxe:
Resposta:
● decimal (decimal)
● decimal com zero na frente (decimal-leading-zero)
● numeração romana minúscula (lower-roman)
● numeração romana maiúscula (upper-roman)
● alfabeto minúsculo (lower-alpha)
● alfabeto maiúsculo (upper-alpha)
Utilização:
<ol>
<li style="list-style-type: decimal">Lista com decimal</li>
<li style="list-style-type: decimal-leading-zero">Lista com decimal-leading-zero</li>
<li style="list-style-type: lower-roman">Lista com lower-roman</li>
<li style="list-style-type: upper-roman">Lista com upper-roman</li>
<li style="list-style-type: lower-alpha">Lista com lower-alpha</li>
<li style="list-style-type: upper-alpha">Lista com upper-alpha</li>
</ol> Página: 4
2. CSS list-style-position
❑ Propriedades list-style-position. Resposta:
Sintaxe:
● inside - A lista faz parte do texto
● outsite - A lista é separada, indentada, do texto
Utilização:
<ol>
<li style="list-style-position: inside">Os marcadores dessa<br />lista estão
<br />dentro do conteúdo<br />de texto
</li>
<li style="list-style-position: inside">Note como<br />a numeração da lista
<br />faz parte do texto<br />
</li>
</ol> Página: 5
2. CSS list-style-position
❑ Propriedades list-style-position. Resposta:
Sintaxe:
● inside - A lista faz parte do texto
● outsite - A lista é separada, indentada, do texto
Utilização:
<ol>
<li style="list-style-position: outside">Os marcadores dessa<br />lista estão
<br />dentro do conteúdo<br />de texto
</li>
<li style="list-style-position: outside">Note como<br />a numeração da lista
<br />faz parte do texto<br />
</li>
</ol> Página: 6
3. CSS
❑ PSEUDO-CLASSES X PSEUDO-ELEMENTOS.
Pseudo-classes permite fazer configurações no CSS para que algum elemento seja modificado de forma
dinâmica. Podemos atribuir cores, aumentar o tamanho da fonte, colocar uma cor de fundo ou executar
outras configurações.
Propriedades:
HOVER - Essa opção acontecerá sempre que o usuário apontar o mouse em cima do link.
ACTIVE - A opção active acontecerá no momento que o usuário clicar e segurar o botão em cima do link.
VISITED - A opção visited acontecerá após o usuário visitar o link. Geralmente atribuimos cores diferentes
após o usuário ter clicado no link. Isso acontece ao fazer uma pesquisa no google, por exemplo.
Página: 7
3. CSS
❑ EXEMPLO PSEUDO-CLASSES.
Sintaxe: Resposta: ( Antes )
<!-- HTML –>
<h1>Exemplo Pseudo-classes</ h1>
<a href="#"> link teste </ a>
/* CSS */
a:hover{
color:green;
}
a:active{ Resposta: ( Depois de clicar )
color:black;
}
a:visited{
color:orange;
}
Página: 8
Propriedade float
none : O elemento não flutua, (será exibido exatamente onde ocorre no texto). Isso é padrão
left: O elemento flutua à esquerda de seu contêiner
rigth: O elemento flutua à direita de seu contêiner
inicial: Define esta propriedade com seu valor padrão. Leia sobre inicial
inherit: Herda esta propriedade de seu elemento pai. Leia sobre herança
Exemplos no Link de referência:
[Link]
Página: 9
Propriedade position
static: Valor padrão. Os elementos são renderizados em ordem, conforme aparecem no fluxo
do documento.
absolute: O elemento é posicionado em relação ao seu primeiro elemento ancestral
posicionado (não estático)
fixed: O elemento é posicionado em relação à janela do navegador
relative: O elemento é posicionado em relação à sua posição normal, então "left:20px"
adiciona 20 pixels à posição ESQUERDA do elemento
sticky: O elemento é posicionado com base na posição de rolagem do usuário. Um elemento
fixo alterna entre relativo e fixo, dependendo da posição de rolagem. Ele é
posicionado relativo até que uma determinada posição de deslocamento seja
encontrada na viewport - então ele "gruda" no lugar (como position:fixed).
Nota: Não suportado no IE/Edge 15 ou anterior. Suportado no Safari a partir da versão
6.1 com um prefixo -webkit-.
Página: 10
Propriedade position
inicial: Define esta propriedade com seu valor padrão. Leia sobre inicial
inherit: herdar Herda esta propriedade de seu elemento pai. Leia sobre herança
Exemplos no Link de referência:
[Link]
Página: 11
4. MENU com CSS
❑ EXEMPLO MENU COM LINKS.
Sintaxe: Resposta:
<h1>Submenus com links</h1>
<ul>
<li>
<a href="#">Item 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
</ul>
</li>
</ul>
Página: 12
4. MENU com CSS
❑ Tag HTML <nav>
A <nav>tag define um conjunto de links de navegação. Resposta:
<!DOCTYPE html>
<html>
<body>
<h1>O elemento nav</h1>
<p>O elemento NAV define um conjunto de links de
navegação:</p>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
</body>
</html> Página: 13
4. MENU com CSS
Exemplo: Construir um menu na orientação horizontal, usando CSS.
<!DOCTYPE HTML>
<html lang="pt-br">
Parte 1
<head>
<meta charset="UTF-8">
<title>Menu Dropdown Horizontal</title>
<!-- Arquivo css externo -->
<link rel="stylesheet" type="text/css" href="style/style_menu.css" />
</head>
<body>
<nav> <!-- Continua -->
Página: 14
4. MENU com CSS
<nav>
<ul class="menu">
Resposta:
<li><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">O que fazemos?</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Design</a></li>
</ul>
</li>
<li><a href="#">Links</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</body>
</html> Parte 2
Página: 15
4. MENU com CSS
1 - Zerando o margin e padding para todos os navegadores,
2 - Estilo de texto para o menu e
3 - Remover marcadores da lista.
4 - Definir borda
5 - Alinhar a esquerda para que as bordas fiquem certas
float:"left"; .
6 - Item de menu
Position:relative:.
Página: 16
4. MENU com CSS
7 - Estilizar os links,
8 - Dropdown
Página: 17
4. MENU com CSS
9 - Exibir o menu
10 - Ajuste de bordas do sub menu
Página: 18
4. MENU com CSS
Figura 1
Figura 2
Página: 19
5. SIDEMENU com CSS
1 - Zerando o margin e padding para todos os navegadores,
2 - Estilo de texto para o menu e
3 - Remover marcadores da lista.
4 - Definir largura
5 - Fixar posição na esquerda Position:fixed
6 - Cor do fundo do menu
.
Página: 20
5. SIDEMENU com CSS
.
Página: 21
5. SIDEMENU com CSS
.
Página: 22
5. MENU com CSS
Figura 2
Figura 1
Página: 23
EXERCÍCIO
1 ) Estude como aplicar cores, imagens e alterar o posicionamento, altura e largura do Menu.
Como referência, utilize o site da w3schools
[Link]
Página: 24
EXERCÍCIO
2 ) Crie um conjunto de 7 páginas contendo o título <title> e no corpo <body> o nome da
página para interligar ao Menu.
Página 1 : Home Ex: <title>Home</title> … <bodt> <h1> Home</h1>
Página 2 : Sobre
Página 3 : Web Design
Página 4 : SEO
Página 5 : Design
Página 6 : Links
Página 7 : Contatos
Usando links para as páginas, faça com que ao selecionar o item no menu a respectiva página
seja apresentada. Obs.: Todas as páginas devem ter a mesma identidade visual usando um
único documento CSS externo.
Página: 25
Dúvidas
