MENÚ PARA BLOGGER COMIC

Hace un tiempo, vi por una web un menú que me llamo la atención. Ahora, basado en aquel menú, he diseñado este tan divertido y a la vez visualmente muy estético. Ahora solo nos queda implementarlo en nuestro blog o web.




Lo primero de todo es poner los estilos (los podeis añadir aparte o conjuntamente con el HTML)

estilos CSS

<style> #menucomic, ul#menucomic li {     float: left; } ul#menucomic li {     background-repeat: no-repeat;     list-style-type: none;     margin-right: 5px;     overflow: hidden; } ul#menucomic li a {     color: #FF7700 !important;     display: block;     font-family: "Lucida Grande",Arial,Helvetica,sans-serif;     font-size: 18px;     font-style: normal;     font-weight: normal;     height: 40px;     overflow: hidden;     padding-bottom: 20px;     padding-top: 20px;     text-align: center;     text-decoration: none;     text-shadow: 0 2px 2px #000000;     text-transform: uppercase;     width: 110px; } ul#menucomic li a:hover {     background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiT1D9TCRNuzt9vEOIDdDJEAMTfTu-EH0s58mOyzkXeJpKfeeOd9KHLKQv-GxRuXHJFyesewRRnDRUfFycFizKTtAuxZ8YYTmpqY0zZDjx9the2va9_bUoUofMU2s2fM23bcWWjRUOGFnp/s1600/hovercomic.png");     background-position: center top;     background-repeat: no-repeat;     color: #FFFFFF !important;     font-style: normal;     font-weight: normal;     overflow: visible; } ul#menucomic li a:active {     position: relative;     top: 2px; } ul#menucomic li#active a {     background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Tzq_UC9FSZL8cvLJrnEjWzUDo-OGrDWGM1PT0IqUp4GFqpCe6k4wpmxnAO4JCMp52lGIGjdAMjuTj-GyP6xmYrPo-aiUZ5CyuUxEEneEk9vgVH4DoE-NPDDx2ZJuYmTB1xKeOd37zFbO/s1600/activecomic.png");     background-position: center top;     background-repeat: no-repeat;     color: #FFFFFF !important; } </style>

Ahora colocaremos el HTML donde queramos que aparezca el menú, cambiando lo que esta en Azul. Si queremos añadir mas enlaces al menú, añadimos la linea <li> <a href="URL">Texto</a></li> tantas veces como queramos

 HTML

<ul id="menucomic">
            <li id="active"> <a href="URL">Inicio</a></li>
            <li> <a href="URL">Texto</a></li>
            <li> <a href="URL">Texto</a></li>
            <li> <a href="URL">Texto</a></li>
  </ul>

Aquí lo tenéis armado y listo para el montaje en un gadget solo le falta colocar las URL de los enlaces.

<style> #menucomic, ul#menucomic li {     float: left; } ul#menucomic li {     background-repeat: no-repeat;     list-style-type: none;     margin-right: 5px;     overflow: hidden; } ul#menucomic li a {     color: #FF7700 !important;     display: block;     font-family: "Lucida Grande",Arial,Helvetica,sans-serif;     font-size: 18px;     font-style: normal;     font-weight: normal;     height: 40px;     overflow: hidden;     padding-bottom: 20px;     padding-top: 20px;     text-align: center;     text-decoration: none;     text-shadow: 0 2px 2px #000000;     text-transform: uppercase;     width: 110px; } ul#menucomic li a:hover {     background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiT1D9TCRNuzt9vEOIDdDJEAMTfTu-EH0s58mOyzkXeJpKfeeOd9KHLKQv-GxRuXHJFyesewRRnDRUfFycFizKTtAuxZ8YYTmpqY0zZDjx9the2va9_bUoUofMU2s2fM23bcWWjRUOGFnp/s1600/hovercomic.png");     background-position: center top;     background-repeat: no-repeat;     color: #FFFFFF !important;     font-style: normal;     font-weight: normal;     overflow: visible; } ul#menucomic li a:active {     position: relative;     top: 2px; } ul#menucomic li#active a {     background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Tzq_UC9FSZL8cvLJrnEjWzUDo-OGrDWGM1PT0IqUp4GFqpCe6k4wpmxnAO4JCMp52lGIGjdAMjuTj-GyP6xmYrPo-aiUZ5CyuUxEEneEk9vgVH4DoE-NPDDx2ZJuYmTB1xKeOd37zFbO/s1600/activecomic.png");     background-position: center top;     background-repeat: no-repeat;     color: #FFFFFF !important; } </style><ul id="menucomic">
            <li id="active"> <a href="URL">Inicio</a></li>
            <li> <a href="URL">Texto</a></li>
            <li> <a href="URL">Texto</a></li>
            <li> <a href="URL">Texto</a></li>
  </ul>

Fecha de la Publicación; 22-01-2019

 Fuente; redeando

 Publicado por;