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

Adding inline text to jQuery Accordian Menu

I'm building a menu using the "Simple JQuery Accordion Menu" here"

http://www.i-marco.nl/weblog/jquery-accordion-menu-redux/

I want to add an (left aligned) inline <div> or <span> for each <li>.  

I've attached an image of the desired output.

Thanks
I've tried adding the following css:
 
ul.menu span {
 
	text-decoration: none;
	font-size: 10px;
	outline: none;	
	color: #fff;
	margin-top: 5px;
	margin-right:5px;
	float: right;
}
 
 
Then added this html before each <li>
 
<li><span>Example</span></li>
 
 
This works in Firefox but does not display properly in IE6 which unfortunately is the target browser

Open in new window

exampleMenu.PNG
0
jonath2002
Asked:
jonath2002
1 Solution
 
knonieCommented:
What about doing it without SPAN, and using li instead, in your class name:
ul.menu li{
...
}
 
And,
<li>Example</li>

Open in new window

0
 
jonath2002Author Commented:
I tried to do it like that but couldn't get it to work.  I started over and below is my updated CSS  and HTML.   It works better in IE but it's still not inline.   Thanks


HTML:
 
 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Simple JQuery Accordion menu - Redux</title>
	<!--[if lt IE 8]>
   <style type="text/css">
   li a {display:inline-block;}
   li a {display:block;}
   </style>
   <![endif]-->
</head>
<body>
 
	<ul id="menu1" class="menu">
		<li>
			<a href="#">Weblog Tools <span>Example</span></a>
			
			<ul>
				<li><a href="http://www.pivotx.net/">PivotX<span>Example</span></a></li>
				<li><a href="http://www.wordpress.org/">WordPress<span>Example</span></a></li>
				<li><a href="http://www.textpattern.com/">Textpattern<span>Example</span></a></li>
				<li><a href="http://typosphere.org/">Typo<span>Example</span></a></li>
			</ul>
		</li>
		<li>
			<a href="#">Programming Languages</a>
			<ul>
				<li><a href="http://www.php.net/">PHP</a></li>
				<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
				<li><a href="http://www.python.org/">Python</a></li>
				<li><a href="http://www.perl.org/">PERL</a></li>
				<li><a href="http://java.sun.com/">Java</a></li>
				<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
			</ul>
		</li>
	
	</ul>
</body>
</html>
 
 
 
 
CSS:
 
 
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.9em;
}
 
p {
  line-height: 1.5em;
}
 
ul.menu, ul.menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 15em;
}
 
ul.menu a {
  display: block;
  text-decoration: none;	
}
 
/* added to try and float span to the right */
ul.menu  span{
float: right;
}
 
ul.menu li {
  margin-top: 1px;
}
 
ul.menu li a {
  background: #333;
  color: #fff;	
  padding: 0.5em;
}
 
ul.menu li a:hover {
  background: #000;
}
 
ul.menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}
 
ul.menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #000 solid;
  padding-left: 15px;
}
 
.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.indent3 { padding-left: 3em; }
.indent4 { padding-left: 4em; }
.indent5 { padding-left: 5em; }

Open in new window

exampleMenu.PNG
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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