Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Bootstrap menu for osc 2.3


Psytanium

Recommended Posts

Hello,

 

I want to share this responsive menu for osc 2.3, and i need some help. When the page load, the menu start expanded then collapse, this is happening on every page load. see the menu here : woodandgas.com

Here you have the files and codes, hopefully someone can help me load this menu collapsed already.

 

Add this to your stylesheet.css

@[member='media'] screen and (max-width: 480px) {
.nav-list {
    display: block;
    padding:0;
}
.nav-header > a {
    background-color: #e66e31;
    border: 1px solid #fff;
    color: #fff;
    float: right;
    margin-right: 10px;
    padding: 2px 10px;
    position: absolute;
    right: 0;
    top: 10px;
}
.nav-list ul {
    margin:0;
    padding:0;
}
.nav-list li {
    margin:0;
    padding:5px;
    border-bottom:1px solid #444;
    position:relative;
}

.nav-list li:last-child {
    border:none;
}
.nav-list li a {
    display:block;
    text-decoration:none;
    line-height: 24px;
    color:#fff;
}
.nav-header.first{position:static;}
.nav-list li a.icon-collapse {
    position:absolute;
    right: 0;
    top:0;
    z-index:100;
    width:100%;
}

.nav-list li li a:hover {
    background:none;
}

.nav-list li li li a {
    padding-left:35px;
}


/* HEADER VARIANT 2*/

.direction-nav a {
    display: inline-block;
    margin-left:4px;
    padding:0;
    width:34px;
    height:33px;
    border-radius: 2px;
    background:#e2e2e2;
    color:#fff;
    text-indent:2px;
    font-size:24px;
    line-height:33px;
    cursor:pointer;
    -webkit-transition: background-color 0.25s 0s ease;
    -moz-transition: background-color 0.25s 0s ease;
    -o-transition: background-color 0.25s 0s ease;
}
.direction-nav a:hover {
    background-color:#9d3bc6;
    color:#fff;
}

}

Place the files found here as follow:

  • bootstrap.min.css in catalog/css
  • bootstrap.js in catalog/js
  • cat_navbar_resp.php in catalog/includes/modules

 

Place this code in template_top.php

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery(".collapse").collapse();
});
</script>

Then call the menu from your header.php or template_top.php wherever you want it to display

 

==============

 

 

The menu works fine, but limited to a 3rd level category, and my problem with this menu it start expanded then collapse, this is happening on every page load, hope fully someone know javascript can fix it. then let me know about it. thx

Link to comment
Share on other sites

It looks like the order of your css or .js file that effecting your page loading. you can trying to switch your css and the .js file orders to see if that can fix the problem.

Link to comment
Share on other sites

  • 2 months later...

@Psytanium - thank you for sharing this menu.  It is a great addon.

 

I am trying my best to incorporate any addon as a module.  After looking at this, I went ahead and created a ht and header module.  None of the actual code of the addon was modified with exception of placing things where they belong within the content module system.  This allows for incorporation without making changes to the header.php.

 

I'd gladly share this code with you if interested.  Also, if anyone knows of a better way, please share your thoughts.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...