Jump to content

Welcome, Guest!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

Search the Community

Showing results for tags 'expand contract'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Announcements
    • Announcements about thirty bees
  • General Discussion
    • English
    • Nederlandstalig Forum - Algemeen
    • Forum Francophone - Discussion Générale
    • Deutsches Forum - Generelle Fragen
    • Forum italiano - Generale
    • Foro en Español - Discusión General
  • Technical
    • Technical help
    • Migrations
    • Updating thirty bees
    • Module help
    • Theme help
    • Bug Reports
  • General Help
    • SEO
    • Modules
    • Themes
    • Job Offers
    • Feedback on my store
    • Tips and Tricks
    • Community Modules and Github
  • Compatibility
    • Module Compatibility
    • Theme Compatibility
  • Native Modules
    • EU Compliance
    • Authorize.net
    • Bees Blog
    • Fixer.io (currency rates from the ECB)
    • Google Analytics
    • ImageMagick
    • MailChimp
    • No CAPTCHA reCAPTCHA
    • PayPal
    • Stripe
    • tawko.to
    • Other native modules

Categories

  • Files

Categories

  • Articles

Product Groups

There are no results to display.

Member Blogs

  • Forum Blog
  • El plan de Dan - Thirty Bees para ecommerce prácticos en español
  • A guid to creat Collapsible FAQ on CMS page
  • Genzos Tips
  • 오피쓰
  • Culture
  • Factor's Corner
  • Datakick's Tips and Tricks
  • Tips & Tutorials
  • Simple Import from Esty to thirtybees
  • Get high-quality men's hair systems from a reliable online store
  • What makes Bidis cigars so popular in the cigar industry?
  • Calgary Real Estate | MLS Calgary | MLS Listings Calgary
  • Why buy effective and reliable California faucets?
  • Get Parts and Accessories Online!
  • Chicago Cubs Shirts: New Age, New Fashion!
  • Vitamin Supplements And Multivitamins

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Store Email Address

Found 1 result

  1. Hi guys Problem: One some menus, screen resolutions and window sizes: I've encountered a niggling issue in the Admin menu (for me at least), where long Admin menu items can cause the next menu items to not be reachable (as there is no expand / contract or scrolling functionality on the menu). The only way to access the menu items below this menu (as far as I know) is to literary go to another menu item to force the large one to contract (wtf). Solution: For me this hampers the user experience a bit. And maybe because I'm used to accordion menus... To make my life easier, I've written a little jQuery solution that can be added to the Admin menu js. This solution creates an expand / contract icon next to an Active menu item (that has a submenu and when the menu is not in the collapsed state). And without having to navigate to another menu item, it expands / contracts the active menu accordingly. The hover / fly over menu is still available. This is my first attempt at writing some code for TB, and I've decided to share it with the community. Hope it provides some value. Instructions Go to admin***\themes\default\js\admin-theme.js Find: function navSidebar() { var sidebar = $('#nav-sidebar'); sidebar.off(); $('.expanded').removeClass('expanded'); $('.maintab').not('.active').closest('.submenu').hide(); After $('.maintab').not('.active').closest('.submenu').hide(); insert the following code: /// Expand Contract Icon for Active Admin Menu Items /// // Set text for expand / contract tooltip var tooltipcontract = 'Contract dropdown menu'; var tooltipexpand = 'Expand dropdown menu'; var expandicon = '+'; var contracticon = '-'; // Finds active admin menu item and generates expand/contract icon element in opened state $('.maintab.active.has_submenu').find('a:eq(0)').append('<div class="expandcontracticon expandcontracticon-open" title="' + tooltipcontract + '">' + contracticon + '</div>'); $('.expandcontracticon').attr('style', 'background-color: #2F3237; width: 10%; float: right; margin-right: 5px; display: block; text-align: center; font-weight: bold;'); // Binds expand / contract functionality to icon $('.expandcontracticon').on('click', function (e) { // Prevents the menuitem a element from opening the default link when the icon is clicked: e.preventDefault(); /// Ensures all submenus are hidden $('.maintab').removeClass('active'); $('.maintab').removeClass('hover'); // Checks open/closed state: var checkifopen = $(this).hasClass('expandcontracticon-open'); // Does sub menu work on menu item for active and not active states // Changes icon's +- text and title tooltip depending on state if (checkifopen == true) { // If the current state is opened, close the submenu and display 'expand/+' state $(this).html(expandicon); $(this).removeClass('expandcontracticon-open'); $(this).addClass('expandcontracticon-closed'); $(this).attr('title', tooltipexpand); } else { // If the current state is closed, show the submenu and display 'contract/-' state $(this).html(contracticon); $(this).parent('a').parent('li').addClass('active'); $(this).removeClass('expandcontracticon-closed'); $(this).addClass('expandcontracticon-open'); $(this).attr('title', tooltipcontract); } }); // Checks if the Sidebar is collapsed and hides / shows icon accordingly // Check on page load $('.page-sidebar-closed').find(".expandcontracticon").hide(); $("body").not('.page-sidebar-closed').find(".expandcontracticon").show(); // Check on Toggle Sidebar menu button action and hides the icon as it's not required on collapsed sidebar // Slight timeout to allow for page-side-bar-closed class to be applied first sidebar.find('.menu-collapse').on("click", function () { setTimeout(function () { $('.page-sidebar-closed').find(".expandcontracticon").hide(); $("body").not('.page-sidebar-closed').find(".expandcontracticon").show(); }, 100); }); /// *** *** /// Save, refresh and party 😄 Hope it helps 🙂
×
×
  • Create New...