Update to earlier topic about navigation menus

tc03 · 2008-01-02 03:45:57

Sorry – this is an update to an earlier question, but maybe said more accurately. I have the following txp code:

<txp:section_list wraptag=“ul” break=“li” active_class=“active” default_title=“Critical Literary Theory” include_default=“1” sections=“Submit,Search,Archives” />

<!—end “navigation”—!>

that puts out the following html:

<div id=“navigation”>
<ul class=“section_list”> <li><a class=“active” href=“http://localhost/example.dev/”>Critical Literary Theory</a></li> <li><a href=“http://localhost/example.dev/submit/”>Submit</a></li> <li><a href=“http://localhost/example.dev/search/”>Search</a></li> <li><a href=“http://localhost/example.dev/archives/”>Archives</a></li>
</ul>

What I want is to be able to style with CSS the first <li> element (Critical Literary Theory) on its own.
Any hints?

iblastoff · 2008-01-02 03:54:56

do you always want to style the first li or do you mean just the active class?

if the former i assume you can do something like this:

.section_list > li:first-child 
{
	<!-- your style -->
}

pseudo-selectors aren’t supported by IE6 and under but can of course be gotten around via hacks.

Gocom · 2008-01-02 04:49:26

pseudo-selectors aren’t supported by IE6 and under but can of course be gotten around via hacks.

Nor in old Firefox, Safari or Opera, but new gecko browsers etc. can handle it. And IE7 also have some faults, as many IE-based browsers like Maxthon. But as iblastoff said it can be easily fixed via hacks, or Mootools / Textpattern included jQuery

But if you mean the active class then just:

.section_list .active {
/* Your style here */
}

Another way is hand-code / mid-hand-code the section_list.

Cheers!

Last edited by Gocom (2008-01-02 04:58:55)

tc03 · 2008-01-02 04:58:46

I have tried the first:child selector -I had to use the following to effect any change at all:

div#navigation>.section_list>li>a:first-child
{color: red;}

But this unfortunately still selects all the ‘a’ elements of class section_list – no other combination of hierachies does anything.
Is there any way to insert a separate class or id to the first <li> element?

tc03 · 2008-01-02 05:01:42

Gocom, what do you mean mid-hand-code?
Also, not just active class. Always I want to have separate style applied to ‘default’ or “critical, literary theory.’

tc03 · 2008-01-02 05:03:08

And disregard the former about the first:child – I was testing in Safari – did not know it was not supported.
What hacks are available – if it is not too much trouble – I can always find them myself.

Gocom · 2008-01-02 05:04:56

I have tried the first:child selector -I had to use the following to effect any change at all:

That’s because your using too many child selectors – it doesn’t work like that. Now your selecting the a-element inside the li and ofcourse every li includes a in the list, so it efects all. Fix:

div#navigation ul.section_list > li:first-child a {}

PS. I was speaking about old Safari, under 3.

Cheers!

Last edited by Gocom (2008-01-02 05:06:26)

tc03 · 2008-01-02 05:13:34

O.k. Gocom, that works fine, but now seems inadequate for what I want – is there any way to give each <li> a unique class using txp?

tc03 · 2008-01-02 05:21:17

What I want the html to look like is this:

<div id=“navigation”>
<ul class=“section_list”> <li class=“critical, literary theory”><a class=“active” href=“http://localhost/example.dev/”>Critical Literary Theory</a></li> <li><a href=“http://localhost/example.dev/submit/”>Submit</a></li> <li><a href=“http://localhost/example.dev/search/”>Search</a></li> <li><a href=“http://localhost/example.dev/archives/”>Archives</a></li>
</ul>

Just a class on first <li>…

Gocom · 2008-01-02 05:36:24

tc03 wrote:

<li class="critical, literary theory">

why there is comma? No commas in classes ;)

<div id="navigation">
	<ul class="section_list">
		<li class="default"><a href="<txp:site_url />">Critical Literary Theory</a></li>
		<li class="<txp:section name="submit" />"><txp:section name="submit" link="1" title="1" /></li>
		<li class="<txp:section name="search" />"><txp:section name="search" link="1" title="1" /></li>
		<li class="<txp:section name="archives" />"><txp:section name="archives" link="1" title="1" /></li>
	</ul>
</div>

Cheers!

Last edited by Gocom (2008-01-02 05:37:01)

iblastoff · 2008-01-02 05:45:28

tc03 wrote:

O.k. Gocom, that works fine, but now seems inadequate for what I want – is there any way to give each <li> a unique class using txp?

What I want the html to look like is this:

<div id=“navigation”>
<ul class=“section_list”> <li class=“critical, literary theory”><a class=“active” href=“http://localhost/example.dev/”>Critical Literary Theory</a></li> <li><a href=“http://localhost/example.dev/submit/”>Submit</a></li> <li><a href=“http://localhost/example.dev/search/”>Search</a></li> <li><a href=“http://localhost/example.dev/archives/”>Archives</a></li>
</ul>

Just a class on first <li>…

you can’t use a class like “critical, literary theory”. that doesn’t makes sense.

so wait..you want a class just on first li or do you want a unique class for each li now??? your inquiry is confusing.

Last edited by iblastoff (2008-01-02 05:47:30)

tc03 · 2008-01-02 05:53:35

comma accidental, but yes, how do I put <li class=”#”> in there at all? By hand? Or is the best bet cbs_menu_navigation plugin?

Textpattern CMS

Textpattern CMS support forum

#1 2008-01-02 03:45:57

Update to earlier topic about navigation menus

#2 2008-01-02 03:54:56

Re: Update to earlier topic about navigation menus

#3 2008-01-02 04:49:26

Re: Update to earlier topic about navigation menus

#4 2008-01-02 04:58:46

Re: Update to earlier topic about navigation menus

#5 2008-01-02 05:01:42

Re: Update to earlier topic about navigation menus

#6 2008-01-02 05:03:08

Re: Update to earlier topic about navigation menus

#7 2008-01-02 05:04:56

Re: Update to earlier topic about navigation menus

#8 2008-01-02 05:13:34

Re: Update to earlier topic about navigation menus

#9 2008-01-02 05:21:17

Re: Update to earlier topic about navigation menus

#10 2008-01-02 05:36:24

Re: Update to earlier topic about navigation menus

#11 2008-01-02 05:45:28

Re: Update to earlier topic about navigation menus

#12 2008-01-02 05:53:35

Re: Update to earlier topic about navigation menus

Board footer