Want to convert horizontal menu into verticle


my theme is bender and i want the codes to work in mobile version.

i have a css menu which works perfectly in horizontal view…so my question
is that can i make it verticle menu .??

below is the codes and also can i disable click on parent tab as of now
clicking on parent tab opens the data related to all submenu tabs under
that parent category (example clicking on clothes tab opens all data
related to pants , shirts, caps etc etc) as i want that click on parent tab
will open subtabs on right side and then link can be clicked on sub tabs to
open data in that subtab category(example click on clothes should open
pants , shirts and caps tab and then any of these can be clicked to open
that data related to them(sub tabs))

below is that code :

php functions:

function css_menu_css(){
                echo '<link
rel="stylesheet" type="text/css" />';


         function css_menu(){

                 osc_goto_first_category() ;

 echo'<ul id="menu">';

 echo '<li><a href="'.osc_base_url().'">Home </a> </li>';

                while ( osc_has_categories() ){

                                echo '<li><a
                         echo'  <div class="tab_1">';

                        while ( osc_has_subcategories() ) {
                                echo'<div class="col_1">';
                                echo'<ul >';
                                 echo '<li><a
href="'.osc_search_category_url().'">'.osc_category_name(). '</a></li>';

                                echo '</ul> </div>';
                echo '</div></li>';



    css codes:

#menu {
        display: block;
        margin:30px auto 0px auto;
        padding:0px 20px 0px 20px;
   -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: #014464;
        background: -moz-linear-gradient(top, #0272a7, #013953);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7),
        border: 1px solid #002232;
  -moz-box-shadow:inset 0px 0px 1px #edf9ff;
        -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
        box-shadow:inset 0px 0px 1px #edf9ff;

thanks in advance

Is there a LIVE link to check this out ‘in action’ So we can see what is it currently looking like and behaving?

You’d have to change the width to be 100% to adopt to whatever the viewport size is

and then ensure any menu items/links are on their own ‘line’

Sponsor our Newsletter | Privacy Policy | Terms of Service