• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 294
  • Last Modified:

Issue with CSS dropdown not functioning correctly when clicked

Hi,
    I have developed a mobile theme, and have a small button which when clicked should display a dropdown.....  this is the code which displays the icon from CSS, and allows the click - I suspect it's something to do with the <a href="#"> as sometimes it will work, just not consistently.....

Can anyone help me please?

						<div class="header-button menu-list1">
                            <a href="#"></a><?php echo $this->getChildHtml('topLinks') ?>
                            

                        </div>	

Open in new window


<?php echo $this->getChildHtml('topLinks') ?> - Calls a magento script to return all categories

The CSS then looks like:

.header-button {
	float:right;
	position:relative;
	width:61px;
	background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f9f9f9)); /*  webkit */
	background: -moz-linear-gradient(top,  #ffffff,  #f9f9f9); /*firefox 3.6+ */
	background: -o-linear-gradient(top,  #ffffff,  #f9f9f9); /*  Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff,  #f9f9f9); /*  IE10+ */
	border-radius: 4px;
}
.header-button > a {
	display:block;
	background-repeat:no-repeat;
	height:52px;
}
.header-button.menu-list1 > a {background-image:url(../images/button-menu1.png); background-position: center 7px;}
.header-button.menu-list1 ul {width:150px;}

.header-button ul {
	display:none;
	background:#9FBC59;
	text-align:left !important;
	position:absolute;
	right:0px;
	top:40px;
	padding:0;
	z-index:999;
}
.header-button ul li {
	float: none !important;
	display:block;
	padding-left:0px;
}
.header-button ul li a {
	display:block !important;
	background:#9FBC59;
	font-size:13px;
	line-height:17px;
	color:#fff !important;
	padding: 5px 10px;
	min-height: 18px;
}
.header-button ul li a:hover {background-color:#5aa602;}
.header-button ul li span {display:none;}

Open in new window


I think it's the a href="#"

Can anyone help?  Thanks
0
damianb123
Asked:
damianb123
  • 3
  • 2
1 Solution
 
Tom BeckCommented:
Post the source of the rendered page. Maybe then we can help.
0
 
damianb123Author Commented:
Hi Tom,
     Here's the rendered code for that section which provides the dropdown.... it looks like all the code is there, but only drops down when the <a href="#"> is clicked.

<div class="header-button menu-list1">
                            <a href="#"></a>    <ul>
                    <li>
                <a href="http://www.mywebsite.co.uk/sale.html">
                    Sale                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/basins.html">
                    Basins                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/shape.html">
                    Shape                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/glass.html">
                    Glass                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/stone.html">
                    Stone                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/basin-set.html">
                    Basin+ Waste Set                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/shelf-basin-sets.html">
                    Shelf + Basin Sets                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/solid-oak.html">
                    Solid Oak                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/wastes.html">
                    Wastes                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/tap.html">
                    Tap              </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/mirror.html">
                    Mirror                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/79-special.html">
                    £49 Deals                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/top-10.html">
                    Top 10                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/clearance.html">
                    Clearance                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/all-products.html">
                    All Products                </a>
            </li>
                    <li>
                <a href="http://www.mywebsite.co.uk/delivery.html">
                    Delivery                </a>
            </li>
            </ul>
                            

                        </div>	

Open in new window

0
 
Tom BeckCommented:
What mechanism do you have in place to cause the <ul> to change to display:block when the anchor is clicked? I would expect some javascript or jQuery. Something like this will work (jQuery):
$('body').on('click', '.header-button a', function(){
		$(this).next('ul').toggle();
	});

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
rgranlundCommented:
Try this;
Give your UL an ID;
Give your link a class;

jQuery(document).ready(function($) {
    $(".LINK CLASS").click(function() {
        $("#UL ID").slideToggle(500);
    });

Open in new window

0
 
damianb123Author Commented:
Thanks Tom, this sorted the problem.  Cheers for your help.

Damian
0
 
Tom BeckCommented:
Glad to help. Thanks for the points.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now