Results 1 to 2 of 2

Thread: convert horzontal css php menu into vertical

  1. #1
    Join Date
    Oct 2019
    Thanked 0 Times in 0 Posts

    Default convert horzontal css php menu into vertical


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

    i have a css menu which works perfectly in horizontal 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
    Last edited by james438; 10-09-2019 at 08:06 AM. Reason: format

  2. #2
    Join Date
    Oct 2019
    Thanked 0 Times in 0 Posts


    Yes you can make it by using this type of CSS code

    <meta name="viewport" content="width=device-width, initial-scale=1">
    .vertical-menu {
      width: 200px;
    .vertical-menu a {
      background-color: #eee;
      color: black;
      display: block;
      padding: 12px;
      text-decoration: none;
    .vertical-menu a:hover {
      background-color: #ccc;
    .vertical-menu {
      background-color: #4CAF50;
      color: white;
    <h1>Vertical Menu</h1>
    <div class="vertical-menu">
      <a href="#" class="active">Home</a>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
    Last edited by james438; 10-12-2019 at 01:32 AM. Reason: format

Similar Threads

  1. Convert mouseovertabs to vertical?
    By PaulBinCT in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 03-17-2015, 07:19 PM
  2. Replies: 6
    Last Post: 07-21-2009, 06:03 AM
  3. Replies: 1
    Last Post: 10-13-2008, 06:24 PM
  4. Replies: 2
    Last Post: 02-06-2008, 08:51 PM
  5. Anylink Vertical Menu - 2nd menu item not showing mouseover links
    By Marva in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-20-2007, 08:11 PM


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts