How to create menu like on the picture? CSS style - html

Question

How to create menu like on the picture?
For now I have:
<div id="nav">
<nav class="top-nav">
<div class="shell">
HOMEPAGE<span></span>
<span class="top-nav-shadow"></span>
<ul>
<li class="active"><span>home</span></li>
<li><span>services</span></li>
<li><span>projects</span></li>
<li><span>solutions</span></li>
<li><span>jobs</span></li>
<li><span>blog</span></li>
<li><span>contacts</span></li>
</ul>
</div>
</nav>
</div>
And my css for div nav:
#nav{
background-color: transparent;
padding: 0em 0em 0em 2em;
white-space: nowrap;
list-style: none outside none;
margin: 0px;
height: auto;
line-height: normal;
}
How to style this? I'm newbie

Answer 1

From your picture i think you are looking for a way to make Tabs not a menu..
The best thing you can use i think is jQuery Tabs
From that link you can check how to make it using simple html and the jQueryUI css.
If you want to use only css and html kindly check this
How to make a simple tabbed menu with CSS and HTML

Answer 2

I created an example.
Please have a look at it.
Working Fiddle
The main concept this is positioning the li tags on ul.
Giving bottom: -1px to the li tags to let them come on the border of the ul.
If you give li border-bottom then it looks like border of ul.
I hope you can create your own styling by referring this (but not copying the code).

Answer 3

Here's a jsFiddle showing the styles you want.
The LI tags are floated left, and overflow: hidden; is set on the parent UL tag to contain the floats.
The entire UL tag is shifted down position: relative; margin-bottom: -1px; over the top of the element below it. The 1 pixel borders under the A tags give the illusion that the tab is part of the element below. The border-bottom-color on the active tab is set to match the background color of the content area.
The A tags are set as display: block; so that they can be given a min-width, text-align: center; and vertical padding
I also put a small border-radius on the A tags for flair :-p This can be removed if you don't want it.
I'm assuming the class .active will be changed by code running on your server. If not, the JS listed in several of the above answers will change the class when a tab is clicked. Some of the answers only change the class on the tab (which isn't really what you want…), so look at the libraries instead (however, the CSS will need to be modified accordingly as most JS tab libraries require a specific HTML structure). If you need further details, please leave a comment below.

Answer 4

You'll need a few js to do it.
Here is an example which doesn't require any framework, and fit to your needs (using jQuery) :
$('#tab-nav > li').click(function(e) {
// get new active pane id
var idPane = $(this).find('a:first').attr('href').substring(1);
// change active nav
$('#tab-nav > li').removeClass('active');
$(this).addClass('active');
// change active pane
$('.tab-pane').removeClass('active');
$('#'+idPane).addClass('active');
});
.clear { display: block; clear: both; height: 0px; }
#container {
position: relative;
color: #497188;
}
#tab-nav {
position: relative;
z-index: 20;
}
#tab-nav > li {
display: block;
border: 1px solid #497188;
border-bottom: 1px solid #497188;
padding: 1px 3px;
margin: 0 2px -1px;
float: left;
}
#tab-nav > li a {
color: #497188;
text-decoration: none;
}
#tab-nav > li.active,
#tab-content {
background: #DEE7EC;
border-bottom: 1px solid #DEE7EC;
}
#tab-content {
position: relative;
clear: both;
border: 1px solid #497188;
z-index: 10;
}
.tab-pane {
display: none;
position: absolute;
top: 0;
left: 0;
padding: 3px;
}
.tab-pane.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
<ul id="tab-nav">
<li class="active"><span>home</span></li>
<li><span>services</span></li>
<li><span>projects</span></li>
<li><span>solutions</span></li>
<li><span>jobs</span></li>
<li><span>blog</span></li>
<li><span>contacts</span></li>
</ul>
<div id="tab-content">
<div id="home" class="tab-pane active">home</div>
<div id="services" class="tab-pane">services</div>
<div id="projects" class="tab-pane">projects</div>
<div id="solutions" class="tab-pane">solutions</div>
<div id="jobs" class="tab-pane">jobs</div>
<div id="blog" class="tab-pane">blog</div>
<div id="contacts" class="tab-pane">contacts</div>
<p class="clear"> </p>
</div>
</div>