Results 1 to 2 of 2

Thread: convert horzontal css php menu into vertical

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

    Default convert horzontal css php menu into vertical

    hi,

    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:

    Code:
    function css_menu_css(){
                    echo '<link
    href="'.osc_base_url().'oc-content/plugins/css_menu/css_menu.css"
    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
    class="drop"href="'.osc_search_category_url().'">'.osc_category_name().'</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>';
                    }
    
                    echo'</ul>';
    
    
            }
    css codes:

    Code:
    #menu {
            list-style:none;
            display: block;
            width:940px;
            margin:30px auto 0px auto;
            height:43px;
            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),
    to(#013953));
            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
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Code:
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .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 a.active {
      background-color: #4CAF50;
      color: white;
    }
    </style>
    </head>
    <body>
    
    <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>
    </div>
    
    </body>
    </html>
    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

Bookmarks

Posting Permissions

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