Make submenu vertical layout in an existing nav menu - html

Question

I have a menu nav function in css3 and html
<nav>
<ul>
<li><a href="#" >Sec1</a></li>
<li><a href="#" >Sec2</a></li>
<li>Sec3
<ul class="menu">
<li>Documents</li>
<li>Messages</li>
<li>Sign Out</li>
</ul></li>
<li><a href="#" >Sec4</a></li>
</ul>
</nav>
but How can the submenu be like:
instead of:
--Fiddle-
here is fiddle

Answer 1

I understand what you are looking for and have made my jsfiddle as close as possible to yours. Instead of using the images you provided, I used icon fonts, which are useful if you plan on using many images. I got my icon font from Keyamoon at icomoon.io. It's a really good tool to have and you should definitely use it for any other icons you need. I picked mine from Icon Minia by Egemen Kapusuz. You can see the icons I used and if those are the only ones you need just download the files from the #font-face urls in the jsfiddle, or from here:
#font-face {
font-family: 'IHK';
src:url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.eot');
src:url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.eot?#iefix') format('embedded-opentype'),
url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.svg#IHK') format('svg'),
url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.woff') format('woff'),
url('http://ilanshomekitchen.x10.mx/icon font testing/IHK.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
You can just copy the links from here and it will give you the font file to download if you only need these 3 icons. Icon fonts are great because instead of loading 1 image for each background or icon or whatever, you can package the icon fonts all together into 1 HTTP request, making them more efficient in the transfer, and also more customizable. Icon fonts are just a font, so you can also manipulate them much more easily; you can change the color of the font, the anti-aliasing, just like a real text font.
I rewrote your code with some jQuery because yours seemed very jumbled and a little hard to understand, so if you would like to use my exact jsfiddle, you will need to add a jquery source link either from a CDN or host your own copy on your server. jquery.com will have tons of info about that.
So for my HTML:
HTML:
<nav>
<ul>
<li><a href="#" >Sec1</a></li>
<li><a href="#" >Sec2</a></li>
<li>Sec3</li>
<li><a href="contacto.html" >Sec4</a></li>
<ul class="menu">
<li>Documents</li>
<br>
<li>Messages</li>
<br>
<li>Sign Out</li>
</ul>
</ul>
</nav>
The html has some new attributes, which I titled data-icon. I used these to incorporate the icons from the icon font without adding an official element in the DOM. Browser support for this is a little new, so you should look into a redundant icon scheme just in case users are using an old browser that doesn't support icon fonts and the other new features that you also had like border-radius and transitions.
The CSS was modified a lot to use psuedo selectors, which are very useful. Additionally, I now have the nav bar working from jQuery, so it should be supported well because jQuery is a cross-browser JavaScript libary.
The only thing I couldn't fix was this little problem where the hovered text in the 2nd navigation level would jump, I don't know why that happens, I will look into it, but for now, this is what I was able to produce for you.

Answer 2

I Change a little your CSS And Html File
Css:
nav
{
position: absolute;
list-style: none;
text-align: center;
width: 620px;
top: 43px;
right: -12px;
background: transparent;
}
nav ul li
{
float: left;
line-height: normal;
}
nav ul li a
{
font-size: 28px;
font-family: 'Yanone Kaffeesatz', arial, sans-serif;
color: black;
text-transform: capitalize;
font-weight: normal;
display: block; /* IE6, IE7 line height fix */
padding: 15px;
background-color: transparent;
margin-top: 0px;
margin-right: 6px;
text-decoration: none;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
}
nav ul li:hover > ul
{
display: inline;
}
nav ul li a:hover
{
background-color: #43AEF2;
padding: 15px;
color: white;
-moz-border-radius: 8px;
border-radius: 8px;
}
nav ul li a.current
{
background-color: #43aef2;
color: white;
-moz-border-radius: 8px;
border-radius: 8px;
}
nav ul:not(.first) li
{
text-align: center;
display: inline-block;
cursor: pointer;
margin-right: 10px;
color: #666;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
}
nav ul:not(.first) li:last-child
{
margin-right: 0;
}
nav ul:not(.first) li:hover
{
color: #000;
}
nav ul:not(.first) li:hover:after
{
color: #bbb;
}
nav ul:not(.first) li:after
{
margin-left: 10px;
content: '';
color: #bbb;
}
nav ul:not(.first) li:last-child:after
{
content: '';
}
.content_menu
{
float: left;
width: 274px;
margin-top: -10px;
margin-bottom: 15px;
}
.content_menu ul
{
margin: 0px;
padding: 0px;
float: none;
}
.content_menu ul li
{
float: none;
padding-bottom: 16px;
}
.content_menu ul li a
{
font-size: 14px;
line-height: normal;
color: #33CC99;
text-align: left;
text-decoration: none;
padding-left: 20px;
}
.content_menu ul li a:hover
{
color: #33CC99;
}
/* submenu */
.menu
{
display: none;
position: absolute;
background: black;
width: 140px;
}
.menu li a
{
display: block;
padding: 0 14px 0 30px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.menu li:first-child a
{
border-left: none;
}
.menu li:last-child a
{
border-right: none;
}
.menu li:hover > a
{
color: #33CC99;
}
.menu ul
{
position: absolute;
top: 60px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.menu li:hover > ul
{
opacity: 1;
}
.menu ul li
{
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.menu li:hover > a
{
height: auto;
}
.menu li a
{
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a
{
border: none;
}
/* Icons */
.menu a.documents
{
background: url(http://designmodo.com/demo/css3dropdownmenu/img/docs.png) no-repeat 6px center;
}
.menu a.messages
{
background: url(http://designmodo.com/demo/css3dropdownmenu/img/bubble.png) no-repeat 6px center;
}
.menu a.signout
{
background: url(http://designmodo.com/demo/css3dropdownmenu/img/arrow.png) no-repeat 6px center;
}
.menu li
{
float: none;
display: initial;
}
HTML
<nav>
<ul>
<li><a href="#" >Sec1</a></li>
<li><a href="#" >Sec2</a></li>
<li>Sec3
<ul class="menu">
<li>Documents</li>
<li>Messages</li>
<li>Sign Out</li>
</ul></li>
<li><a href="contacto.html" >Sec4</a></li>
</ul>
</nav>