Documentation of Boxy tab

We will going to see a css only boxy tab. I use only css to create this tab. See the image of boxy tab:



The blue color will available for the hover tab.

First let's see the html structure for this tab.

A
B
C
D
E
F

And we applied the following css for our tab:

ul#nav {
    position: relative;    
    float: left;
    width: 99%;
    height: 150px;
    border-bottom: 1px solid #d9d9d9;
    border-top: 1px solid #d9d9d9;
    border-left: 1px solid #d9d9d9;    
}

ul#nav li {
    float: left;
    list-style: none;
    border-bottom: 7px solid #a9a9a9;
    border-left: 1px solid #a9a9a9;
    border-right: 1px solid #a9a9a9;
    border-top: 2px solid #a9a9a9;
    width: 156px;
    height: 140px;
    background-color: #fcfcfc;
}

ul#nav li:hover {
    border-bottom: 7px solid #0066cc;
    background-color: #f9f9f9;
}


ul#nav li a {
    color: #a9a9a9;
    position: relative;
    z-index: 2;
    float: left;
    font-size: 15px;
    text-decoration: none;
    padding: 35px 15px;
    font-weight: normal;
    letter-spacing: 1px;
    word-spacing: 5px;
    width: 140px;
    height: 140px;
}

ul#nav li a:hover {
    color: #0066cc;
}

ul#nav #selected {
    border-bottom: 7px solid #0066cc;
}

ul#nav #selected a {
    color: #0066cc;
}

You can download the code from here


See the book OpenCart 1.4 Template Design Cookbook.
See the book Joomla Mobile Development Beginners Guide

List of my works:

Technical Support:

If you still face the technical problem, please get support of our highly skilled technical team: garazlab.com.


Wordpress Plugins:

1. Real-Time Health Data from Every Where:WP plugin to display real-time health data & increase sale by promoting user specific products according to health information: garazlab.com.
2. Woocommerce Stock Notification Builder:Sends desktop, mobile & email notifications with full customization.Build your own product notification system with it: garazlab.com.

Opencart Extensions:

1. Product Based Quantity Wise Shipping: Find it here.
2. OpenSSLCOMMERZ: integrate SSLCOMMERZ with opencart: Find it here.
3. Fine Search v.1.0 - Improves Opencart search feature to find relevant: Find it here.
4. Opensweetcaptcha - An easy way to generate attractive captcha for your system!: Find it here.
5. Custom Field Product - add unlimited custom fields to the product form: Find it here.
6. Formcaptcha - add captcha on the register page: Find it here.

My Books:

1. OpenCart 1.4 Template Design Cookbook.
2. Joomla Mobile Development Beginners Guide

Download Boxy tab

We have seen the documentation of Boxy tab. You can download boxy tab from here.

Thanks for interest. Stay with us for more tahSin's gaRAge products.

See the book OpenCart 1.4 Template Design Cookbook.
See the book Joomla Mobile Development Beginners Guide

List of my works:

Technical Support:

If you still face the technical problem, please get support of our highly skilled technical team: garazlab.com.


Wordpress Plugins:

1. Real-Time Health Data from Every Where:WP plugin to display real-time health data & increase sale by promoting user specific products according to health information: garazlab.com.
2. Woocommerce Stock Notification Builder:Sends desktop, mobile & email notifications with full customization.Build your own product notification system with it: garazlab.com.

Opencart Extensions:

1. Product Based Quantity Wise Shipping: Find it here.
2. OpenSSLCOMMERZ: integrate SSLCOMMERZ with opencart: Find it here.
3. Fine Search v.1.0 - Improves Opencart search feature to find relevant: Find it here.
4. Opensweetcaptcha - An easy way to generate attractive captcha for your system!: Find it here.
5. Custom Field Product - add unlimited custom fields to the product form: Find it here.
6. Formcaptcha - add captcha on the register page: Find it here.

My Books:

1. OpenCart 1.4 Template Design Cookbook.
2. Joomla Mobile Development Beginners Guide