Soon, we’ll be announcing a fresh new marketplace for TastyIgniter developers.

  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5

[Not Solved] Mobile Menu Design Question

#1 Tanbir Offline Junior Member
Hello,

I was wondering if there is a possible way under settings or editing the code that would change the way the initial menu looks on mobile.

For example;
When you first load tastyigniter on mobile the first category (lets say Appetizers) will auto expand.

What I am looking to do is have none of the categories auto expand, only once clicked by the user.
#2 sampoyigi Offline 1 == 2
Editing the code will do the job.

Open file main/views/themes/tastyigniter-orange/partials/menu_list.php
Change lines 6 and 11 to remove
Code:
<?php echo ($category_count === 1) ? 'true' : 'false'; ?>

Both lines should look like this


Code:
<a class="menu-toggle visible-xs visible-sm collapsed" href="#<?php echo $category['slug']; ?>" role="button" data-toggle="collapse" data-parent=".menu-list" aria-expanded="false" aria-controls="<?php echo $category['slug']; ?>">


Code:
<div id="<?php echo $category['slug']; ?>" class="navbar-collapse collapse wrap-none">
#3 Tanbir Offline Junior Member
Thank you for the quick reply, but I am having issues finding this, I am looking at the v2 tastyigniter.

Lines 6 to 11 in menu_list.php

Code:
    Line 6:        <div class="menu-container mix <?php echo $category_name; ?>">
    Line 7:            <a class="menu-toggle visible-xs visible-sm collapsed" href="#<?php echo $category_name; ?>" role="button" data-toggle="collapse" data-parent=".menu-list" aria-expanded="<?php echo ($category_count === 1) ? 'true' : 'false'; ?>" aria-controls="<?php echo $category_name; ?>">
    Line 8:                <?php echo $category['name']; ?>
    Line 9:                <i class="fa fa-angle-down fa-2x fa-pull-right text-muted"></i>
    Line 10:            <i class="fa fa-angle-up fa-2x fa-pull-right text-muted"></i>
    Line 11:        </a>
#4 sampoyigi Offline 1 == 2
In your case then, replace line 7 to
Code:
<a class="menu-toggle visible-xs visible-sm collapsed" href="#<?php echo $category['slug']; ?>" role="button" data-toggle="collapse" data-parent=".menu-list" aria-expanded="false" aria-controls="<?php echo $category['slug']; ?>">

And the second code to change should be on line 12
#5 Tanbir Offline Junior Member
It does what is intended, it will close all the categories leaving the user to click which one they wish. The only issue now is that when you try to click to open a category it will not open. Attempted to find a fix but was not able to.
#6 sampoyigi Offline 1 == 2
Lets see what you have on lines 6 to 12 in the menu_list.php partial file
#7 Tanbir Offline Junior Member
Lines 6 to 12:


Code:
Line 6: <div class="menu-container mix <?php echo $category_name; ?>">
Line 7:  <a class="menu-toggle visible-xs visible-sm collapsed" href="#<?php echo $category['slug']; ?>" role="button" data-toggle="collapse" data-parent=".menu-list" aria-expanded="false" aria-controls="<?php echo $category['slug']; ?>">
Line 8: <?php echo $category['name']; ?>
Line 9: <i class="fa fa-angle-down fa-2x fa-pull-right text-muted"></i>
Line 10: <i class="fa fa-angle-up fa-2x fa-pull-right text-muted"></i>
Line 11: </a>
Line 12: <div id="<?php echo $category['slug']; ?>" class="navbar-collapse collapse wrap-none">

Full menu_list.php

http://collabedit.com/788dq

Code:
<?php if ($categories) {?>
    <div id="Container" class="menu-list">
        <?php $category_count = 1; ?>
        <?php foreach ($categories as $category_id => $category) { ?>
            <?php $category_name = strtolower(str_replace(' ', '-', str_replace('&', '_', $category['name']))); ?>
            <div class="menu-container mix <?php echo $category_name; ?>">
                <a class="menu-toggle visible-xs visible-sm collapsed" href="#<?php echo $category['slug']; ?>" role="button" data-toggle="collapse" data-parent=".menu-list" aria-expanded="false" aria-controls="<?php echo $category['slug']; ?>">
                    <?php echo $category['name']; ?>
                    <i class="fa fa-angle-down fa-2x fa-pull-right text-muted"></i>
                    <i class="fa fa-angle-up fa-2x fa-pull-right text-muted"></i>
                </a>
                <div id="<?php echo $category['slug']; ?>" class="navbar-collapse collapse wrap-none">
                    <div class="menu-category">
                        <h3 class="hidden-xs hidden-sm"><?php echo $category['name']; ?></h3>
                        <p><?php echo $category['description']; ?></p>
                        <?php if (!empty($category['image'])) { ?>
                            <img class="img-responsive" src="<?php echo $category['image']; ?>" alt="<?php echo $category['name']; ?>"/>
                        <?php }?>
                    </div>

                     <div class="menu-items">
                        <?php if (isset($menus[$category_id]) AND !empty($menus[$category_id])) { ?>
                            <?php foreach ($menus[$category_id] as $menu) { ?>

                                <div id="menu<?php echo $menu['menu_id']; ?>" class="menu-item">
                                    <div class="menu-item-wrapper row">
                                        <?php if ($show_menu_images === '1' AND !empty($menu['menu_photo'])) { ?>
                                            <div class="menu-thumb col-xs-2 col-sm-2 wrap-none wrap-right">
                                                <img class="img-responsive img-thumbnail" alt="<?php echo $menu['menu_name']; ?>" src="<?php echo $menu['menu_photo']; ?>">
                                            </div>
                                        <?php } ?>

                                        <div class="menu-content <?php echo ($show_menu_images === '1' AND !empty($menu['menu_photo'])) ? 'col-xs-6 col-sm-6' : 'col-xs-8'; ?> wrap-none wrap-right">
                                            <span class="menu-name"><b><?php echo $menu['menu_name']; ?></b></span>
                                            <span class="menu-desc small">
                                                <?php echo $menu['menu_description']; ?>
                                            </span>
                                        </div>
                                        <div class="menu-right col-xs-4 wrap-none">
                                            <span class="menu-price"><?php echo $menu['menu_price']; ?></span>
                                            <span class="menu-button">
                                                <?php if ($menu['mealtime_status'] === '1' AND empty($menu['is_mealtime'])) { ?>
                                                    <a class="btn btn-primary btn-cart add_cart disabled"><span class="fa fa-plus"></span></a>
                                                <?php } else if (isset($menu_options[$menu['menu_id']])) { ?>
                                                    <a class="btn btn-primary btn-cart add_cart" onClick="openMenuOptions('<?php echo $menu['menu_id']; ?>', '<?php echo $menu['minimum_qty']; ?>');">
                                                        <span class="fa fa-plus"></span>
                                                    </a>
                                                <?php } else { ?>
                                                    <a class="btn btn-primary btn-cart add_cart" onClick="addToCart('<?php echo $menu['menu_id']; ?>', '<?php echo $menu['minimum_qty']; ?>');">
                                                        <span class="fa fa-plus"></span>
                                                    </a>
                                                <?php } ?>
                                            </span>
                                            <?php if ($menu['mealtime_status'] === '1' AND empty($menu['is_mealtime'])) { ?>
                                                <div class="menu-mealtime text-danger"><?php echo sprintf(lang('text_mealtime'), $menu['mealtime_name'], $menu['start_time'], $menu['end_time']); ?></div>
                                            <?php }?>

                                            <?php if ($menu['special_status'] === '1' AND $menu['is_special'] === '1') { ?>
                                                <div class="menu-special"><?php echo $menu['end_days']; ?></div>
                                            <?php }?>
                                        </div>
                                    </div>
                                </div>
                            <?php } ?>
                        <?php } else { ?>
                            <p><?php echo lang('text_empty'); ?></p>
                        <?php } ?>

                        <div class="gap"></div>
                        <div class="gap"></div>
                     </div>
                </div>
            </div>
            <?php $category_count++; ?>
        <?php } ?>
    </div>
<?php } else { ?>
    <p><?php echo lang('text_no_category'); ?></p>
<?php } ?>

<?php if (!empty($menu_total) AND $menu_total < 150) { ?>
    <div class="pager-list"></div>
<?php } else { ?>
    <div class="pagination-bar text-right">
        <div class="links"><?php echo $pagination['links']; ?></div>
        <div class="info"><?php echo $pagination['info']; ?></div>
    </div>
<?php } ?>
#8 sampoyigi Offline 1 == 2
(09 Jun, 09:23 PM)Tanbir Wrote: Lines 6 to 12:


Code:
Line 6: <div class="menu-container mix <?php echo $category_name; ?>">
Line 7:  <a class="menu-toggle visible-xs visible-sm collapsed" href="#<?php echo $category['slug']; ?>" role="button" data-toggle="collapse" data-parent=".menu-list" aria-expanded="false" aria-controls="<?php echo $category['slug']; ?>">
Line 8: <?php echo $category['name']; ?>
Line 9: <i class="fa fa-angle-down fa-2x fa-pull-right text-muted"></i>
Line 10: <i class="fa fa-angle-up fa-2x fa-pull-right text-muted"></i>
Line 11: </a>
Line 12: <div id="<?php echo $category['slug']; ?>" class="navbar-collapse collapse wrap-none">

It's working for me on the demo. You can also open the console in Chrome dev tools to see if there's any error. Also, make sure you don't have any special character in your category name, it can cause issues with toggling the categories.
#9 Tanbir Offline Junior Member
It does work on the desktop site but when its the mobile version it fails to respond to any tap. I opened the Chrome dev and there is no errors

Possibly Related Threads...

Thread / Author
Translate datepicker??
Last Post g3ry made Yesterday, 06:53 PM
Forum Jump:

Users browsing this thread: 1 Guest(s)