0

please visit link

on top left, you can see "currency" with dropdown box. once you mouse-over on that, you can see as below

enter image description here

in same link if you scroll down below you can see filters : Device, Design, Category, Sort by

once you mouse-over on Design, you can see like below image

enter image description here

I need same kind of functionality for "currency" also.

means, i want to remove the textfield.

once we mouse-over on "currency" text , it should display drop-down values.

code for currency

Script

<script>

jQuery(document).ready(function () {
  jQuery('select#select-language').hover(function () {
    jQuery(this).attr('size', jQuery('option').length);
  }, function () {
    jQuery(this).attr('size', 1);
  });
});

</script>

CSS

select#select-language {
    position: absolute;
    top: 30px;
    z-index: 2;
    margin-top: -2em;
    margin-left: 4em;
padding-right: 2em;
}

option:hover {
    color: white;
    background: #0000FF;
}



</style>

phtml

<?php if(count($this->getStores())>1): ?>
<div class="form-language">
    <label for="select-language"><?php echo $this->__('Currency:') ?></label>
    <select id="select-language" title="<?php echo $this->__('Your Language') ?>" onchange="window.location.href=this.value">
    <?php foreach ($this->getStores() as $_lang): ?>
        <?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' selected="selected"' : '' ?>
        <option value="<?php echo $_lang->getCurrentUrl() ?>"<?php echo $_selected ?>><?php echo $this->escapeHtml($_lang->getName()) ?></option>
    <?php endforeach; ?>
    </select>
</div>
<?php endif; ?>

when i use template path hints , i found this code for filters :

<!--<?php $_filters = $this->getActiveFilters() ?>

<?php $_removeTxt = Mage::helper('catalog')->__('Remove This Item') ?>
<?php if (!empty($_filters)): ?>
    <?php if (Mage::helper('glace_navigationlayer')->isVersionLessThan(1, 4)): ?>
        <h4><?php echo $this->__('Currently Shopping by') ?></h4>
        <ol class="narrowed-category">
    <?php else: ?>
        <p class="block-subtitle"><?php echo Mage::helper('catalog')->__('Currently Shopping by') ?></p>
        <ol class="currently">    
    <?php endif; ?>

    -->
<?php endif; ?>
1

You should convert <select><option>... to <ul><li>... list, and apply jQuery scipt as shown here in demo : http://html-tuts.com/jquery-dropdown-menu/

Full Solution:

Change this phtml

<?php if(count($this->getStores())>1): ?>
<div class="form-language">
    <label for="select-language"><?php echo $this->__('Currency:') ?></label>
    <select id="select-language" title="<?php echo $this->__('Your Language') ?>" onchange="window.location.href=this.value">
    <?php foreach ($this->getStores() as $_lang): ?>
        <?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' selected="selected"' : '' ?>
        <option value="<?php echo $_lang->getCurrentUrl() ?>"<?php echo $_selected ?>><?php echo $this->escapeHtml($_lang->getName()) ?></option>
    <?php endforeach; ?>
    </select>
</div>
<?php endif; ?>

WITH :

<?php if(count($this->getStores())>1): ?>
<div class="form-language">
    <label for="select-language"><?php echo $this->__('Currency:') ?></label>

    <ul id="select-language" title="<?php echo $this->__('Your Language') ?>" class="dropDownMenu">
        <li><a href=""><?php echo $this->__('Your Language') ?></a>
        <ul>
            <?php foreach ($this->getStores() as $_lang): ?>
                <?php $_selected = ($_lang->getId() == $this->getCurrentStoreId()) ? ' class="selected"' : '' ?>
                <li <?php echo $_selected ?>>
                <a href="<?php echo $_lang->getCurrentUrl() ?>"><?php echo $this->escapeHtml($_lang->getName()) ?></a>
                </li>
            <?php endforeach; ?>
        </ul>
        </li>
    </ul>

</div>
<?php endif; ?>

Now Apply Below jQuery Code:

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery('#select-language li').hover(function() {
        jQuery(this).children('ul').stop(true, false, true).fadeToggle(300);
    });
});
</script>

Add some CSS (change it according to your requirement) :

<style type="text/css">
.menuBackground {
    background: brown;
    text-align: center;
}
.dropDownMenu a {
    color: #FFF;
}
.dropDownMenu,
.dropDownMenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dropDownMenu li {
    position: relative;
}
.dropDownMenu a {
    padding: 10px 20px;
    display: block;
    text-decoration: none;
}
.dropDownMenu a:hover {
    background: #000;
}
.dropDownMenu > li {
    display: inline-block;
    vertical-align: top;
    margin-left: -4px; /* solve the 4 pixels spacing between list-items */
}
.dropDownMenu > li:first-child {
    margin-left: 0;
}
.dropDownMenu ul {
    box-shadow: 2px 2px 15px 0 rgba(0,0,0, 0.5);
}
.dropDownMenu > li > ul {
    text-align: left;
    display: none;
    background: green;
    position: absolute;
    top: 100%;
    left: 0;
    width: 240px;
    z-index: 999999;
}
</style>

Note: Remove other jQuery or CSS binded with select-language element

  • i used option & select in script and css, is i have to change there also ? – Baby in Magento May 4 '16 at 12:53
  • check answer with Full Solution – Anil Suthar May 4 '16 at 13:19
  • updated, please check link. dropdown values are missing. – Baby in Magento May 4 '16 at 13:23
  • updated jQuery code, please apply it – Anil Suthar May 4 '16 at 13:27
  • please check link, dropdown values are displaying too much below. – Baby in Magento May 4 '16 at 13:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.