Bootstrap menu for osc 2.3

[Psytanium]

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

[fleeced]

Wow, is that woodandgas.com built in OSC 2.3.4 with bootstrap, looks very good.

 

Which are the main files/folders that need changing to change look of a store in bootstrap?

[ken0306]

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.

[radhavallabh]

Hi, @@Psytanium Did you find a solution to this... I am facing the same issue

How to load this menu collapsed.....

[Psytanium]

@@radhavallabh give me your email, i will send you 3 files to replace.

[radhavallabh]

@@Psytanium Hi Just PM you....
Thnak you so much for your valuable help..... :)

[burt]

@@Psytanium your link at http://www.oscommerce.com/forums/topic/407703-bootstrap-menu-for-osc-23/?p=1728387is no longer valid.  Could you re-upload this menu to the Addons area or as a forum attachment?  Lots of people would be interested to use your Menu.

[Psytanium]

I tried to attach the .rar file here but couldn't. I upload it as addon. here is the link: http://addons.oscommerce.com/info/9339

 

The files are working on osc 2.3.4 but need some css modifications because it is retrieved my own website.

[burt]

Awesome thanks @@Psytanium - I've no doubt that lots of people will thank you.

[Guest]

@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.

[Psytanium]

@@marcello if you tested your additional work and things are going well, you can re upload the addon with a log file about the new feature.  and if you know some css, the addon need few modification to look better on a fresh osc.