{"id":707,"date":"2020-07-03T22:02:21","date_gmt":"2020-07-04T01:02:21","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=707"},"modified":"2022-12-09T08:24:11","modified_gmt":"2022-12-09T11:24:11","slug":"barra-de-navegacao-horizontal-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/barra-de-navegacao-horizontal-css\/","title":{"rendered":"Barra de navega\u00e7\u00e3o horizontal CSS"},"content":{"rendered":"

Existem duas maneiras de criar uma barra de navega\u00e7\u00e3o horizontal. Usando itens de lista embutidos ou flutuantes .<\/p>\n

Itens de lista embutidos<\/strong>
\nUma maneira de criar uma barra de navega\u00e7\u00e3o horizontal \u00e9 especificar os elementos <li> como embutidos, al\u00e9m do c\u00f3digo “padr\u00e3o” da p\u00e1gina anterior:<\/p>\n

\"\"<\/p>\n

Come\u00e7ando por um exemplo simples<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nul {\r\n  list-style-type: none;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\nli {\r\n  display: inline;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<ul>\r\n  <li><a href=\"#home\">Home<\/a><\/li>\r\n  <li><a href=\"#news\">News<\/a><\/li>\r\n  <li><a href=\"#contact\">Contact<\/a><\/li>\r\n  <li><a href=\"#about\">About<\/a><\/li>\r\n<\/ul>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Outro exemplo, j\u00e1 com conte\u00fado<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nul {\r\n  list-style-type: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n}\r\n\r\nli {\r\n  float: left;\r\n}\r\n\r\nli a {\r\n  display: block;\r\n  padding: 8px;\r\n  background-color: #dddddd;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<ul>\r\n  <li><a href=\"#home\">Home<\/a><\/li>\r\n  <li><a href=\"#news\">News<\/a><\/li>\r\n  <li><a href=\"#contact\">Contact<\/a><\/li>\r\n  <li><a href=\"#about\">About<\/a><\/li>\r\n<\/ul>\r\n\r\n<p><b>Note:<\/b> If a !DOCTYPE is not specified, floating items can produce unexpected results.<\/p>\r\n<p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.<\/p>\r\n<p><b>Note:<\/b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Exemplo explicado:<\/strong><\/p>\n
float: left;<\/code> – use float para fazer com que os elementos do bloco deslizem um ao lado do outro
\ndisplay: block;<\/code> – A exibi\u00e7\u00e3o dos links como elementos de bloco faz com que toda a \u00e1rea do link seja clic\u00e1vel (n\u00e3o apenas o texto) e nos permite especificar preenchimento (e altura, largura, margens, etc., se desejar)
\npadding: 8px;<\/code>– Como os elementos do bloco ocupam toda a largura dispon\u00edvel, eles n\u00e3o podem flutuar pr\u00f3ximos um do outro. Portanto, especifique algum preenchimento para torn\u00e1-los com boa apar\u00eancia
\nbackground-color: #dddddd;<\/code> – Adicione uma cor de fundo cinza a cada elemento<\/p>\n
Dica: adicione a cor de fundo a <ul> em vez de cada elemento <a> se desejar uma cor de fundo com largura total:<\/span><\/p>\n
Veja um c\u00f3digo mais completo<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nul {\r\n  list-style-type: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  background-color: #333;\r\n}\r\n\r\nli {\r\n  float: left;\r\n}\r\n\r\nli a {\r\n  display: block;\r\n  color: white;\r\n  text-align: center;\r\n  padding: 14px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\nli a:hover {\r\n  background-color: #111;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<ul>\r\n  <li><a class=\"active\" href=\"#home\">Home<\/a><\/li>\r\n  <li><a href=\"#news\">News<\/a><\/li>\r\n  <li><a href=\"#contact\">Contact<\/a><\/li>\r\n  <li><a href=\"#about\">About<\/a><\/li>\r\n<\/ul>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Link de navega\u00e7\u00e3o ativo \/ atual<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nul {\r\n  list-style-type: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  background-color: #333;\r\n}\r\n\r\nli {\r\n  float: left;\r\n}\r\n\r\nli a {\r\n  display: block;\r\n  color: white;\r\n  text-align: center;\r\n  padding: 14px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\nli a:hover:not(.active) {\r\n  background-color: #111;\r\n}\r\n\r\n.active {\r\n  background-color: #4CAF50;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<ul>\r\n  <li><a class=\"active\" href=\"#home\">Home<\/a><\/li>\r\n  <li><a href=\"#news\">News<\/a><\/li>\r\n  <li><a href=\"#contact\">Contact<\/a><\/li>\r\n  <li><a href=\"#about\">About<\/a><\/li>\r\n<\/ul>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Links de alinhamento \u00e0 direita<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nul {\r\n  list-style-type: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  background-color: #333;\r\n}\r\n\r\nli {\r\n  float: left;\r\n}\r\n\r\nli a {\r\n  display: block;\r\n  color: white;\r\n  text-align: center;\r\n  padding: 14px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\nli a:hover:not(.active) {\r\n  background-color: #111;\r\n}\r\n\r\n.active {\r\n  background-color: #4CAF50;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<ul>\r\n  <li><a href=\"#home\">Home<\/a><\/li>\r\n  <li><a href=\"#news\">News<\/a><\/li>\r\n  <li><a href=\"#contact\">Contact<\/a><\/li>\r\n  <li style=\"float:right\"><a class=\"active\" href=\"#about\">About<\/a><\/li>\r\n<\/ul>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Com divisores<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nul {\r\n  list-style-type: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  background-color: #333;\r\n}\r\n\r\nli {\r\n  float: left;\r\n  border-right:1px solid #bbb;\r\n}\r\n\r\nli:last-child {\r\n  border-right: none;\r\n}\r\n\r\nli a {\r\n  display: block;\r\n  color: white;\r\n  text-align: center;\r\n  padding: 14px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\nli a:hover:not(.active) {\r\n  background-color: #111;\r\n}\r\n\r\n.active {\r\n  background-color: #4CAF50;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<ul>\r\n  <li><a class=\"active\" href=\"#home\">Home<\/a><\/li>\r\n  <li><a href=\"#news\">News<\/a><\/li>\r\n  <li><a href=\"#contact\">Contact<\/a><\/li>\r\n  <li style=\"float:right\"><a href=\"#about\">About<\/a><\/li>\r\n<\/ul>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
 <\/p>\n
Com topo fixo<\/strong><\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {margin:0;}\r\n\r\nul {\r\n  list-style-type: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  background-color: #333;\r\n  position: fixed;\r\n  top: 0;\r\n  width: 100%;\r\n}\r\n\r\nli {\r\n  float: left;\r\n}\r\n\r\nli a {\r\n  display: block;\r\n  color: white;\r\n  text-align: center;\r\n  padding: 14px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\nli a:hover:not(.active) {\r\n  background-color: #111;\r\n}\r\n\r\n.active {\r\n  background-color: #4CAF50;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<ul>\r\n  <li><a class=\"active\" href=\"#home\">Home<\/a><\/li>\r\n  <li><a href=\"#news\">News<\/a><\/li>\r\n  <li><a href=\"#contact\">Contact<\/a><\/li>\r\n  <li><a href=\"#about\">About<\/a><\/li>\r\n<\/ul>\r\n\r\n<div style=\"padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;\">\r\n  <h1>Fixed Top Navigation Bar<\/h1>\r\n  <h2>Scroll this page to see the effect<\/h2>\r\n  <h2>The navigation bar will stay at the top of the page while scrolling<\/h2>\r\n\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n  <p>Some text some text some text some text..<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
 <\/p>\n
Sticbar Navbar<\/h3>\n
Adicione\u00a0position: sticky;<\/code>a <ul> para criar uma barra de navega\u00e7\u00e3o adesiva.<\/p>\n
Um elemento adesivo alterna entre relativo e fixo, dependendo da posi\u00e7\u00e3o de rolagem.\u00a0\u00c9 posicionado em rela\u00e7\u00e3o at\u00e9 que uma determinada posi\u00e7\u00e3o de deslocamento seja alcan\u00e7ada na janela de visualiza\u00e7\u00e3o – ent\u00e3o “gruda” no lugar (como posi\u00e7\u00e3o: fixa).<\/p>\n
 <\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {\r\n  font-size: 28px;\r\n}\r\n\r\nul {\r\n  list-style-type: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  overflow: hidden;\r\n  background-color: #333;\r\n  position: -webkit-sticky; \/* Safari *\/\r\n  position: sticky;\r\n  top: 0;\r\n}\r\n\r\nli {\r\n  float: left;\r\n}\r\n\r\nli a {\r\n  display: block;\r\n  color: white;\r\n  text-align: center;\r\n  padding: 14px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\nli a:hover {\r\n  background-color: #111;\r\n}\r\n\r\n.active {\r\n  background-color: #4CAF50;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"header\">\r\n  <h2>Scroll Down<\/h2>\r\n  <p>Scroll down to see the sticky effect.<\/p>\r\n<\/div>\r\n\r\n<ul>\r\n  <li><a class=\"active\" href=\"#home\">Home<\/a><\/li>\r\n  <li><a href=\"#news\">News<\/a><\/li>\r\n  <li><a href=\"#contact\">Contact<\/a><\/li>\r\n<\/ul>\r\n\r\n<h3>Sticky Navigation Bar Example<\/h3>\r\n<p>The navbar will <strong>stick<\/strong> to the top when you reach its scroll position.<\/p>\r\n<p><strong>Note:<\/strong> Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit- prefix.<\/p>\r\n<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.<\/p>\r\n<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.<\/p>\r\n<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.<\/p>\r\n<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.<\/p>\r\n<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.<\/p>\r\n<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.<\/p>\r\n<p>Some text to enable scrolling. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
E por \u00faltimo um layout responsivo<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<style>\r\nbody {margin: 0;}\r\n\r\nul.sidenav {\r\n  list-style-type: none;\r\n  margin: 0;\r\n  padding: 0;\r\n  width: 25%;\r\n  background-color: #f1f1f1;\r\n  position: fixed;\r\n  height: 100%;\r\n  overflow: auto;\r\n}\r\n\r\nul.sidenav li a {\r\n  display: block;\r\n  color: #000;\r\n  padding: 8px 16px;\r\n  text-decoration: none;\r\n}\r\n \r\nul.sidenav li a.active {\r\n  background-color: #4CAF50;\r\n  color: white;\r\n}\r\n\r\nul.sidenav li a:hover:not(.active) {\r\n  background-color: #555;\r\n  color: white;\r\n}\r\n\r\ndiv.content {\r\n  margin-left: 25%;\r\n  padding: 1px 16px;\r\n  height: 1000px;\r\n}\r\n\r\n@media screen and (max-width: 900px) {\r\n  ul.sidenav {\r\n    width: 100%;\r\n    height: auto;\r\n    position: relative;\r\n  }\r\n  \r\n  ul.sidenav li a {\r\n    float: left;\r\n    padding: 15px;\r\n  }\r\n  \r\n  div.content {margin-left: 0;}\r\n}\r\n\r\n@media screen and (max-width: 400px) {\r\n  ul.sidenav li a {\r\n    text-align: center;\r\n    float: none;\r\n  }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<ul class=\"sidenav\">\r\n  <li><a class=\"active\" href=\"#home\">Home<\/a><\/li>\r\n  <li><a href=\"#news\">News<\/a><\/li>\r\n  <li><a href=\"#contact\">Contact<\/a><\/li>\r\n  <li><a href=\"#about\">About<\/a><\/li>\r\n<\/ul>\r\n\r\n<div class=\"content\">\r\n  <h2>Responsive Sidenav Example<\/h2>\r\n  <p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.<\/p>\r\n  <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.<\/p>\r\n  <p>You will learn more about media queries and responsive web design later in our CSS Tutorial.<\/p>\r\n  <h3>Resize the browser window to see the effect.<\/h3>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
 <\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n