adam1h
asked on
Css Drop Down Menu
Hi experts,
I'm trying to use a css drop down menu into my website.
Here are the source : Css3 Drop Down Menu .
Here are my troubles :
- the 4th last menu, start at "products", marked with the class "menu_right" ; must be aligned at the left of the container (<ul>) but it don't work.
- the top menus marked with class "drop" don't work too : normally a small picture (an arrow - drop.png) must be showed at the right of the menu, to indicate that a submenu exists.
How it should be :
menu-prototype.tiff
How it is now:
menu-now.tiff
Do you have an idea what's wrong ?
I have applied all the css & html code as follow :
- css : the same code as the final example except the width of the menu
- html :
I attach the both concerned files ("2_navigationBar.cfm" -> renamed in "2_navigationBar.cfm.txt" & "navigationBar.css")
I also attache a print screen of the look of my menu now (menu_now.tiff) & a prototype of how it should be (menu_prototype.tiff).
Well, the code is in html & coldfusion, but no matter, it works fine, just the css who does tricks to me :-)
The coldfusion code just retrieve the different page names.
Thanks a lot.
navigationBar.css
2-navigationBar.cfm.txt
I'm trying to use a css drop down menu into my website.
Here are the source : Css3 Drop Down Menu .
Here are my troubles :
- the 4th last menu, start at "products", marked with the class "menu_right" ; must be aligned at the left of the container (<ul>) but it don't work.
- the top menus marked with class "drop" don't work too : normally a small picture (an arrow - drop.png) must be showed at the right of the menu, to indicate that a submenu exists.
How it should be :
menu-prototype.tiff
How it is now:
menu-now.tiff
Do you have an idea what's wrong ?
I have applied all the css & html code as follow :
- css : the same code as the final example except the width of the menu
#menu
{
/*width: 940px;*/
width: 90%;
}
- html :
<ul id="menu">
<li> <!--- index group (Home) --->
<cfinvoke returnvariable="variables.indexPages" component="tools.pagesTools" method="getPages" group="index">
<cfloop array="#variables.indexPages#" index="variables.page">
<cfif variables.page.getPosition() NEQ 0>
<cfset variables.pageName = uCase(variables.page.getTitle())>
<cfoutput> <a class="navigationBarLink" href="#variables.page.getUrl()#" onclick="processing();">#variables.pageName#</a> </cfoutput>
</cfif>
</cfloop>
</li>
<li> <!--- company group (About Joe Cool) --->
<a class="drop">ABOUT JOE COOL</a>
<div class="dropdown_2columns">
<cfinvoke returnvariable="variables.companyPages" component="tools.pagesTools" method="getPages" group="company">
<cfloop array="#variables.companyPages#" index="variables.page">
<cfif variables.page.getPosition() NEQ 0>
<cfset variables.pageName = uCase(variables.page.getTitle())>
<div class="col_2">
<cfoutput> <a class="navigationBarLink" href="#variables.page.getUrl()#" onclick="processing();">#variables.pageName#</a> </cfoutput>
<hr />
</div>
</cfif>
</cfloop>
</div>
</li>
<li class="menu_right"> <!--- products group (Products) --->
<a class="drop">PRODUCTS</a>
<div class="dropdown_3columns"> <!--- align_right --->
<cfinvoke returnvariable="variables.productsPages" component="tools.pagesTools" method="getPages" group="products">
<cfloop array="#variables.productsPages#" index="variables.page">
<cfif variables.page.getPosition() NEQ 0>
<cfset variables.pageName = uCase(variables.page.getTitle())>
<div class="col_3">
<cfoutput> <a class="navigationBarLink" href="#variables.page.getUrl()#" onclick="processing();">#variables.pageName#</a> </cfoutput>
<hr />
</div>
</cfif>
</cfloop>
</div>
</li>
<li class="menu_right"> <!--- best sellers link --->
<a class="navigationBarLink" href="/fashion/jewellery/Products.cfm?" onclick="processing();"> <cfoutput>BEST SELLERS</cfoutput> </a>
</li>
<li class="menu_right"> <!--- new items link --->
<a class="navigationBarLink" href="/fashion/jewellery/Products.cfm?" onclick="processing();"> <cfoutput>NEW ITEMS</cfoutput> </a>
</li>
<li class="menu_right"> <!--- search box --->
<a>
<cfform action="/fashion/jewellery/search.cfm" method="post" id="navigationBarSearch" onsubmit="return validate();">
<cfoutput> <cfset variables.searchLabel = ormExecuteQuery("from Page where page = 'Search' AND cfcName like '%_#session.language#'")> </cfoutput>
<cfinput type="text" name="userSearch" maxlength="100" value="Enter keyword(s) here">
<cfinvoke returnvariable="variables.javascript" component="javascripts.javascriptsTools" method="validateInput" controlName="userSearch" isRequired="true"
controlLabelValue="#variables.searchLabel[1].getTitle()#" maxLength="100" minLength="1" isAlphaNumericOnly="true">
<cfoutput>#variables.javascript#</cfoutput>
<cfinput type="submit" name="submitSearch" value="#variables.searchLabel[1].getTitle()#" onclick="processing();">
<cfinput type="hidden" name="validate" value="search">
</cfform>
</a>
<script type="text/javascript">
function validate()
{
if(validate_userSearch())
{
return true;
}
return false;
}
</script>
</li>
</ul>
I attach the both concerned files ("2_navigationBar.cfm" -> renamed in "2_navigationBar.cfm.txt" & "navigationBar.css")
I also attache a print screen of the look of my menu now (menu_now.tiff) & a prototype of how it should be (menu_prototype.tiff).
Well, the code is in html & coldfusion, but no matter, it works fine, just the css who does tricks to me :-)
The coldfusion code just retrieve the different page names.
Thanks a lot.
navigationBar.css
2-navigationBar.cfm.txt
Anyway we can see a live link?
ASKER
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for your comment.
Yes I have copied the css exactly, I just have changed the #menu width
I'll double check.
Yes I have copied the css exactly, I just have changed the #menu width
I'll double check.
ASKER
The #menu li .drop class has a backgroung image :
The ..menu_right now runs well ; I have correct the code.
It was :
It is now :
Don't now why it was rightright.
Thanks for that.
#menu li .drop
{
padding-right: 21px;
background: url(/pictures/graphics/drop.png) no-repeat rightright 8px;
}
#menu li:hover .drop
{
background: url(/pictures/graphics/drop.gif) no-repeat rightright 7px;
}
What do you mean exactly ?The ..menu_right now runs well ; I have correct the code.
It was :
#menu .menu_right
{
float: rightright;
margin-right: 0px;
}
It is now :
#menu .menu_right
{
float: right;
margin-right: 0px;
}
Don't now why it was rightright.
Thanks for that.
ASKER
I have corrected other rightright, and now the arrow show good.
Thank you a thousand time for your precious help LZ1.
Thank you a thousand time for your precious help LZ1.
Glad to help