{"id":2256,"date":"2017-02-20T09:56:04","date_gmt":"2017-02-20T14:26:04","guid":{"rendered":"https:\/\/www.blog.venezuelahosting.com\/noticias\/?p=2188"},"modified":"2017-02-20T09:56:04","modified_gmt":"2017-02-20T14:26:04","slug":"css-menu-fijo-en-3-sencillos-pasos","status":"publish","type":"post","link":"https:\/\/www.blog.venezuelahosting.com\/noticias\/css-menu-fijo-en-3-sencillos-pasos\/","title":{"rendered":"CSS: men\u00fa fijo en 3 sencillos pasos"},"content":{"rendered":"

En el \u00e1rea inform\u00e1tica<\/a>, un men\u00fa contiene una serie de opciones que el usuario puede elegir para realizar determinadas tareas; estos est\u00e1n contenidos en una barra de men\u00fa, la cual se puede decir que es una propiedad que tienen las ventanas para poseer men\u00fas, dado que la barra en s\u00ed misma no es una ventana, como lo puede ser un bot\u00f3n de comando o un cuadro de texto, pero tampoco es una barra de herramientas, sino un objeto contenedor de otros men\u00fas.<\/p>\n

Estos se organizan siguiendo el principio de los \u00e1rboles, esto quiere decir que un men\u00fa puede tener men\u00fas hijos y men\u00fas padres; al inicio, cuando se crea una barra de men\u00fa, el identificador del objeto nuevo es un identificador de men\u00fas v\u00e1lido, adem\u00e1s de que la barra de men\u00fa queda como la ra\u00edz, el nodo principal, o en otras palabras, un men\u00fa sin padres.<\/p>\n

De ah\u00ed se empieza a crear men\u00fas hijos como lo puede ser uno que se llame Archivo, otro Edici\u00f3n y otro Ver, que tendr\u00e1n como padre al manipulador (handler) del men\u00fa ra\u00edz; estos men\u00fas, a su vez, pueden tener men\u00fas hijos, as\u00ed, archivo, descendiendo de MenuBar puede engendrar Abrir, Guardar, Guardar como, Codificaci\u00f3n, entre otros; y siguiendo estas mismas reglas, Codificaci\u00f3n, descendiente de Archivo puede engendrar un submen\u00fa con los comandos ASCII, Unicode, UTF-8, entre otros.<\/p>\n

\u00a0\"\"<\/a><\/p>\n

Tipos de men\u00fa<\/strong><\/h3>\n

Entre los men\u00fas m\u00e1s usuales, destacan:<\/p>\n

-Normales:<\/strong>\u00a0Los que tienen el predominio m\u00e1s alto en las aplicaciones<\/a>.<\/p>\n

-Casillas de verificaci\u00f3n:<\/strong>\u00a0Activan un indicador y su estado cambia a \u00abmarcado\/desmarcado\u00bb.<\/p>\n

-Botones de radio o Radio buttons:<\/strong>\u00a0Es\u00a0 un grupos de botones en donde s\u00f3lo se puede tener activo uno de ellos y su indicador acostumbra a ser una vi\u00f1eta.<\/p>\n

-Submen\u00fas:<\/strong>\u00a0Son aquellos men\u00fas que tienen men\u00fas hijos, es decir que no se puede hacer clic en \u00e9l, en vez de eso hay que seleccionar uno de sus hijos; usualmente traen consigo una flecha en la lateral derecha indicando la naturaleza del mismo.<\/p>\n

-Separadores:<\/strong>\u00a0Son los men\u00fas sin nombre ni valor, pero con handler, se muestran como l\u00edneas grises opacas entre la lista de comandos.<\/p>\n

HTML, CSS Y JQUERY para hacerlo<\/strong><\/h3>\n

Hay ocasiones en que se necesita que el men\u00fa de un sitio web permanezca en la parte superior del navegador cuando se hace scroll hacia abajo. Para lograr esto, se puede crear un men\u00fa y mediante jQuery lograr que al ocultarse de la vista, se coloque en la parte superior de la pantalla, por encima de cualquier elemento.<\/p>\n

La librer\u00eda jQuery entre tantas de sus funciones, cuenta con un calculador de la posici\u00f3n absoluta de un elemento, a\u00fan si este no tuviera el estilo position en absolute; para obtenerla, se utiliza la funci\u00f3n offset, y se lo compara con scrollTop, se puede saber si parte del men\u00fa ha salido de la vista del usuario. El c\u00f3digo se debe poner en el elemento script antes mencionado.<\/p>\n

En cuanto a CSS, los estilos men\u00fa-contenedor y men\u00fa deben ser del mismo alto, as\u00ed cuando se \u201cindependice\u201d men\u00fa de su men\u00fa padre, no quedar\u00e1 un vac\u00edo, de ser as\u00ed se correr\u00eda todo hacia arriba causando otro desplazamiento, devolviendo el objeto a su estado est\u00e1tico, tambi\u00e9n llamado llamado \u201cciclado\u201d.<\/p>\n

Pasos para crear un men\u00fa fijo<\/strong><\/h3>\n

Los men\u00fas fijos son una tendencia en el dise\u00f1o web<\/a> hoy en d\u00eda, porque lucen bien, y son muy \u00fatiles para los visitantes. De esta manera se puede crear un ligero, funcional y pr\u00e1ctico men\u00fa fijo para un sitio web:<\/p>\n

1.<\/strong> Para comenzar, se debe hacer la estructura b\u00e1sica del header y del men\u00fa; asimismo, es importante recordar que tendr\u00e1 algo arriba de \u00e9l, usualmente un logotipo.<\/p>\n

2.<\/strong> En el header, se coloca un contenedor para el logotipo y el men\u00fa con una clase llamada .contenedor, esta clase se usa para centrar los elementos del men\u00fa.<\/p>\n

3.<\/strong> Es importante que se tenga contenido para que aparezca un scroll y se pueda bajar en la p\u00e1gina para ver el men\u00fa en acci\u00f3n. Para CSS no se hace nada especial; un simple y ordinario men\u00fa. En Jquery es sencillo, es preciso conocer la distancia entre el men\u00fa y la parte m\u00e1s alta de la p\u00e1gina, as\u00ed que se guarda en una variable llamada altura este dato, y luego se extrae con el objeto offset.<\/p>\n

 <\/p>\n

\"sobre-el-autor-_Venezuela-Hosting\"<\/p>\n","protected":false},"excerpt":{"rendered":"

En el \u00e1rea inform\u00e1tica, un men\u00fa contiene una serie de opciones que el usuario puede elegir para realizar determinadas tareas; estos est\u00e1n contenidos en una barra de men\u00fa, la cual se puede decir que es una propiedad que tienen las ventanas para poseer men\u00fas, dado que la barra en s\u00ed misma no es una ventana, […]<\/p>\n","protected":false},"author":1,"featured_media":2196,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"quote","meta":{"footnotes":""},"categories":[81,4,13],"tags":[],"class_list":["post-2256","post","type-post","status-publish","format-quote","has-post-thumbnail","hentry","category-desarrolladores-web","category-general","category-varios","post_format-post-format-quote"],"_links":{"self":[{"href":"https:\/\/www.blog.venezuelahosting.com\/noticias\/wp-json\/wp\/v2\/posts\/2256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blog.venezuelahosting.com\/noticias\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blog.venezuelahosting.com\/noticias\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blog.venezuelahosting.com\/noticias\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blog.venezuelahosting.com\/noticias\/wp-json\/wp\/v2\/comments?post=2256"}],"version-history":[{"count":0,"href":"https:\/\/www.blog.venezuelahosting.com\/noticias\/wp-json\/wp\/v2\/posts\/2256\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.blog.venezuelahosting.com\/noticias\/wp-json\/wp\/v2\/media?parent=2256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blog.venezuelahosting.com\/noticias\/wp-json\/wp\/v2\/categories?post=2256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blog.venezuelahosting.com\/noticias\/wp-json\/wp\/v2\/tags?post=2256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}