+34 671518985 info@primecubeit.com

In this post we share an easy way to make dossier navigation good looking and intuitive to use. With this simple HTML code you will be able to construct tabs that will allow you to switch between different dossiers in a seamless manner. This could be a nice alternative for a starting page and could be used as a workaround to connect many big dossiers and make it look like it was a single piece. The effect that you will get will like the sample we present below:

You can achieve the same effect by copying and pasting the following code into every dossier you want to connect and then customize it accordingly:

<nav class=”navigation”>
<a class=”navi_logo”><img src=”https://www.primecubeit.com/wp-content/uploads/2018/03/primecube-3.png”></a>
<a href=”#” class=”inactive”> First link</a>
<a href=”#” class=”active”> Second link </a>
<a href=”#” class=”inactive”> Third link </a>
<a href=”#” class=”inactive”> Fourth link </a>
<a href=”#” class=”inactive”> Fifth link </a>
</nav>

<style>
.navigation a,
.navigation a:before,
.navigation a:after {
box-sizing: inherit;
}

.navigation {
display: flex;
box-sizing: border-box;
background: white;
text-align: center;
overflow: hidden;
height: 100%;
padding-top: 5px;
}

.navigation a {
font-family: Arial !important;
font-size: small !important;
flex: 1 1;
float: left;
background: #F4F2F3;
padding: 10px;
font-size: 16px;
color: #878787;
text-decoration: none;
margin: 0;
border: solid 1px #c8c8c8;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 0 2px 2px !important;
}

.active {

background: white !important;
border-bottom: solid 2px #D4114D !important;
font-weight: bold !important;
color: black !important;
border-top: white !important;

}

.inactive:hover {

color: #878787 !important;
text-decoration: underline !important;

}

.navi_logo {
background: white !important;
border-left: none !important;
border-top: none !important;
}

.navi_logo img {
max-width: 100% !important;
max-height: 100% !important;
}
</style>

If you know HTML this code is very easy and not problematic to decypher. However if you do not have any programming experience, start customizing the code with the following piece of code:

<nav class=”navigation”>
<a class=”navi_logo”><img src=”https://www.primecubeit.com/wp-content/uploads/2018/03/primecube-3.png“></a>
<a href=”#” class=”inactive“> First link</a>
<a href=”#” class=”active“> Second link </a>
<a href=”#” class=”inactive“> Third link </a>
<a href=”#” class=”inactive“> Fourth link </a>
<a href=”#” class=”inactive“> Fifth link </a>
</nav>

  • This is the link to the image you want to show
  • This is the text you want to have on each tab
  • This is the status of the tab, for example now tab two is active and any other tab is inactive, so for example in dossier number 3 we would paste code with “Third link” as active and set every other as inactive
  •  Here is where you place the link to the dossier. On the current dossier (tab) do not put any link, because we do not want to navigate to the same page as we already are on.
Share This