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

Para criar uma barra de navega\u00e7\u00e3o vertical, voc\u00ea pode estilizar os elementos <a> dentro da lista, al\u00e9m do c\u00f3digo da p\u00e1gina anterior:<\/p>\n

\"\"<\/p>\n

O b\u00e1sico<\/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 a {\r\n  display: block;\r\n  width: 60px;\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>A background color is added to the links to show the link area.<\/p>\r\n<p>Notice that the whole link area is clickable, not just the text.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Agora um exemplo com estilos aplicados:<\/p>\n
\"\"<\/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  width: 200px;\r\n  background-color: #f1f1f1;\r\n}\r\n\r\nli a {\r\n  display: block;\r\n  color: #000;\r\n  padding: 8px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\n\/* Change the link color on hover *\/\r\nli a:hover {\r\n  background-color: #555;\r\n  color: white;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Vertical Navigation Bar<\/h2>\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
Com um menu ativo<\/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  width: 200px;\r\n  background-color: #f1f1f1;\r\n}\r\n\r\nli a {\r\n  display: block;\r\n  color: #000;\r\n  padding: 8px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\nli a.active {\r\n  background-color: #4CAF50;\r\n  color: white;\r\n}\r\n\r\nli a:hover:not(.active) {\r\n  background-color: #555;\r\n  color: white;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Vertical Navigation Bar<\/h2>\r\n<p>In this example, we create an \"active\" class with a green background color and a white text. The class is added to the \"Home\" link.<\/p>\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
Com borda<\/p>\n
\"\"<\/p>\n
 <\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {\r\n  margin: 0;\r\n}\r\n\r\nul {\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\nli a {\r\n  display: block;\r\n  color: #000;\r\n  padding: 8px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\nli a.active {\r\n  background-color: #4CAF50;\r\n  color: white;\r\n}\r\n\r\nli a:hover:not(.active) {\r\n  background-color: #555;\r\n  color: white;\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=\"margin-left:25%;padding:1px 16px;height:1000px;\">\r\n  <h2>Fixed Full-height Side Nav<\/h2>\r\n  <h3>Try to scroll this area, and see how the sidenav sticks to the page<\/h3>\r\n  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay\/sit on top of this div.<\/p>\r\n  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).<\/p>\r\n  <p>Some text..<\/p>\r\n  <p>Some text..<\/p>\r\n  <p>Some text..<\/p>\r\n  <p>Some text..<\/p>\r\n  <p>Some text..<\/p>\r\n  <p>Some text..<\/p>\r\n  <p>Some text..<\/p>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Agora um layout pronto<\/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  width: 200px;\r\n  background-color: #f1f1f1;\r\n  border: 1px solid #555;\r\n}\r\n\r\nli a {\r\n  display: block;\r\n  color: #000;\r\n  padding: 8px 16px;\r\n  text-decoration: none;\r\n}\r\n\r\nli {\r\n  text-align: center;\r\n  border-bottom: 1px solid #555;\r\n}\r\n\r\nli:last-child {\r\n  border-bottom: none;\r\n}\r\n\r\nli a.active {\r\n  background-color: #4CAF50;\r\n  color: white;\r\n}\r\n\r\nli a:hover:not(.active) {\r\n  background-color: #555;\r\n  color: white;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h2>Vertical Navigation Bar<\/h2>\r\n<p>In this example, we center the navigation links and add a border to the navigation bar.<\/p>\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
 <\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n