Vous êtes sur la page 1sur 8
< (/thread/17984/tutorial-single-level-navigation-using-single-image-replacement) Tutorial: Single Level Navigation Using Single Image Replacement (/thread/17984/tutorial-single-level- navigation-using-single-image-replacement) tanmccuin Reply #1, 3
< (/thread/17984/tutorial-single-level-navigation-using-single-image-replacement)
Tutorial: Single Level Navigation Using Single Image
Replacement (/thread/17984/tutorial-single-level-
navigation-using-single-image-replacement)
tanmccuin Reply #1, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation-
using-single-image-replacement#dis-post-98531)
So, Last night i started to convert my design for a client over to MODx, it's a simple little Foxy
Cart Boutique store with only about 6 products - perfect for Foxycart and MODx. They wanted to
originally go with Monster, but i was able to convince them otherwise. So first things first was
(http://forums.modx.com/user/? setting up the Navigation.
user=29288)
13
The Single Image Rollover effect i've been using for these situations can be found here:
http://ghettocooler.net/2007/05/31/simple-navigation-with-css-image-replacement/
(http://ghettocooler.net/2007/05/31/simple-navigation-with-css-image-replacement/)
With only a minimal amount of modding i was able to get this up and working in MODx.
1. replacing my hardcoded navigation with Wayfinder
REPLACE THIS:
1
<div id="nav">
2
Â
  <ul id="navigation">
3
Â
   <li id="nav1"><a href="belts/" >Belts</a></li>
4
Â
Â
  <li id="nav2"><a href="jewelry/">Jewelry</a></li>
5
Â
   <li id="nav3"><a href="contact/">Contact</a></li>
6
Â
Â
Â
Â
<li id="nav4"><a href="about/">About</a></li>
7
Â
Â
  <li id="nav5"><a href="retailers/">Retailers</a></li
8
Â
   <li id="nav6"><a href="wholesale/">Wholesale</a></li
9
Â
Â
Â
</ul>
10
Â
 </div>
WITH THIS:
1
<ul id="navigation">
2
Â
Â
Â
[!Wayfinder?startId=`0`&level=`1` &rowIdPrefix=`navitem`!
3
Â
Â
Â
</ul>
I'm using the &level 1 as there are subpages for a few categories that i don't want to appear in
the navigation. and rowIdPrefix to give each list item it's own specific id. This is nessessary for
the single image navigation to function. Since i set the rowIdPrefix to be "navitem" the generated
nav sans CSS will look something like this:
1
<div id="nav">
2
Â
Â
Â
<ul id="navigation">
3
Â
Â
Â
Â
<ul>
4
Â
     <li id="navitem2" class="active"><a href="/ind
5
Â
     <li id="navitem3"><a href="/index.php?id=3" ti
6
Â
Â
Â
Â
Â
Â
<li id="navitem4"><a href="/index.php?id=4" ti
7
Â
Â
Â
Â
Â
Â
<li id="navitem5"><a href="/index.php?id=5" ti
8
Â
     <li id="navitem6"><a href="/index.php?id=6" ti
9
Â
     <li id="navitem7" class="last"><a href="/index
10
Â
Â
Â
Â
</ul>Â
Â
Â
11
</ul>
12
</div>
Now if you followed the ghetto cooler tutorial at the top of the page, you should have your single
nav image and your CSS, just make sure your CSS nav item ID's reflect the IDs you setup
through wayfinder and you should be well on your way to a nice little single image nav using
wayfinder. Of course, if you add any new navigation through MODx you'll need to rework your
navigation image and CSS.
The Last thing to do is to get your navigation to stay active on your active pages. This is difficult
using the single image effect because just one CSS class like .active won't do the trick since
we're using background-position to create the rollover effect and each nav item uses a specific

bg-position.

What i decided to do was to use the suggestion @ ghetto cooler; to give each pages body a

custom id, and use that as a CSS selector - but to do this, without having to handcode each

page was to use MODx's internal template code to generate my page Ids - in my case, since

the nav items, for instance "Belts" had multiple pages under them i needed an id that multiple

pages could share, so i couldn't use the PAGETITLE, i instead used the alias, as multiple pages

seem to be able to share the same alias. my template code looks like this:

1

<body id="[*alias*]">

and my new rollover and active css looks like this:

1

ul li#navitem2 a:hover, body#Belts ul li#navitem2 a{

2

background­position: XXpx ­XXpx;

3

}

Once that's all in place, and MODx replaces the template code with the page alias (in this case,

Belts) you should have a perfectly nice single image rollover navigation tied to your MODx

backend. Enjoy.

ps. I'm rather new to Working with MODx and i've gotten great help from everyone here. I know

this tutorial probably isn't the best and only way to do it, and i hope some of you will explain

even better methods or if this wasn't clear enough, ask questions. But i wanted to give a little

something back. Enjoy.

-T

single-image-replacement#dis-post-98532)

Nice tutorial. Thanks for posting it

single-image-replacement#dis-post-98532) Nice tutorial. Thanks for posting it dev_cw Reply #2, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation-using-
single-image-replacement#dis-post-98532) Nice tutorial. Thanks for posting it dev_cw Reply #2, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation-using-

dev_cw Reply #2, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation-using-

single-image-replacement#dis-post-98532) Nice tutorial. Thanks for posting it dev_cw Reply #2, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation-using-
single-image-replacement#dis-post-98532) Nice tutorial. Thanks for posting it dev_cw Reply #2, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation-using-

(http://forums.modx.com/user/?

user=7231)

4,205

  • kongondo Reply #3, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation-
    Thanks T for this tut. Very well written! I have two observations:

using-single-image-replacement#dis-post-98533)

kongondo Reply #3, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation- Thanks T for this tut. Very well
kongondo Reply #3, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation- Thanks T for this tut. Very well

(http://forums.modx.com/user/?

user=16183)

1,390

1

<ul id="navigation">

2

Â

Â

[!Wayfinder?startId=`0`&level=`1` &rowIdPrefix=`navitem`!]

3

Â

Â

</ul>

1.

In the code above, why do you need to place the Wayfinder call inside the <ul>? I ask since

the menu WF will generate will also have <ul> tags in its outermost container. You probably did

this since you wanted to give the ul an id? You might as well have done this in the outerTpl, e.g.

1

<ul id="navigation"[+wf.classes+]>

2

[+wf.wrapper+]

3

</ul>

I might be missing something here. My point is that you end up with a extra <ul> tags you

probably don't need?

could not be achieved dynamically using WF alone. It seems the

ghetto...tut

applies to static

pages in this respect?

WF offers several classes to denote the active document. E.g. if I am not mistaken, WF will

automatically give the active document a class "active". There's also the "selfClass". I could be

wrong here. But the advantage I see here is that using the WF method, you would only have one

CSS declaration to style all documents whenever they are active instead of having CSS hover

and active rules for each and every document in your menu.

I probably don't get it so I might be wrong.

could not be achieved dynamically using WF alone. It seems the ghetto...tut applies to static pages

EDIT #1: I have re-read my second observation above and I have a feeling I am

wrong...lemme

read it one more time

could not be achieved dynamically using WF alone. It seems the ghetto...tut applies to static pages

EDIT #2: Ignore the second comment above - I wasn't getting it

could not be achieved dynamically using WF alone. It seems the ghetto...tut applies to static pages

EDIT #3: Seems I was right after all. See the post below. We can take advantage of

Wayfinder's dynamically generated "active" class for documents that are current

could not be achieved dynamically using WF alone. It seems the ghetto...tut applies to static pages

Again, very good effort! Thx for sharing...

cheers/k

using-single-image-replacement#dis-post-98534)

tanmccuin Reply #4, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation-

could not be achieved dynamically using WF alone. It seems the ghetto...tut applies to static pages
could not be achieved dynamically using WF alone. It seems the ghetto...tut applies to static pages

Kongondo - You're right about the unnecessary UL, i wasn't feeling like figuring out how to setup

my wf.class and wf.wrapper info last night so i just did what worked - but you're right, it makes

could not be achieved dynamically using WF alone. It seems the ghetto...tut applies to static pages

sense to eliminate the unnecessary UL. tks for the heads up.

(http://forums.modx.com/user/? user=29288) I'm interested to hear if someone else has an idea on how to select the pages for active linking.

13

using-single-image-replacement#dis-post-98535)

OK,

kongondo Reply #5, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation-

could not be achieved dynamically using WF alone. It seems the ghetto...tut applies to static pages
could not be achieved dynamically using WF alone. It seems the ghetto...tut applies to static pages

Seems I was right after all - about my second comment above - regarding the use of WF's

(http://forums.modx.com/user/? user=16183) dynamically generated "active" class.

1,390

I managed to make this work, without using the body tags, i.e.

  • 1 <body id="[*alias*]">

Like I said above, Wayfinder will automatically create an "active" class for any list/menu item

that is currently being viewed. In addition, since we are using the &rowIdPrefix we have two

selectors we can use. The id and the dynamic active class of the menu items. Armed with this

info, for each document, I just added identical CSS rules to the "active" class and the a:hover

like you did with the body tag. Here's a sample CSS code

  • 1 div#navigation ul li#nav71 a:hover, div#navigation ul li#nav71.ac

  • 2 background­position:­164px ­80px

In the above example my &rowIdPrefix=`nav` in my Wayfinder call

The end result was a CSS sprite menu with the "persistent" hover state

Like they say (OK, I know, cliche) - "there's usually more than one way to something in modx"

could not be achieved dynamically using WF alone. It seems the ghetto...tut applies to static pages

Thanks again for this Tut T.

cheers/k

using-single-image-replacement#dis-post-98536)

tanmccuin Reply #6, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation-

using-single-image-replacement#dis-post-98536) tanmccuin Reply #6, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation- Fantastic - nice job, i'll be
using-single-image-replacement#dis-post-98536) tanmccuin Reply #6, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation- Fantastic - nice job, i'll be

Fantastic - nice job, i'll be sure to use this in the future. Q: For my current setup, which has sub

pages that aren't navigable through the main nav, but that i still need to keep the parent nav

menu item highlighted - i'd have to add css values for every subpage, it could just be apples to

(http://forums.modx.com/user/? oranges, but for situation it seems more efficient to give the bodies of parent and children the

user=29288)

  • 13 same ID value ( the alias ) - or am i way off base

using-single-image-replacement#dis-post-98536) tanmccuin Reply #6, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation- Fantastic - nice job, i'll be

Thanks again for taking a look - the more i use MODx the more i really dig it.

single-image-replacement#dis-post-98537)

c-m Reply #7, 3 years, 4 months ago (/thread/17984/tutorial-single-level-navigation-using-

using-single-image-replacement#dis-post-98536) tanmccuin Reply #6, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation- Fantastic - nice job, i'll be
using-single-image-replacement#dis-post-98536) tanmccuin Reply #6, 3 years, 6 months ago (/thread/17984/tutorial-single-level-navigation- Fantastic - nice job, i'll be

Must of missed a trick here as I dont have it working.

(http://forums.modx.com/user/? CSS

user=4429)

429

1

ul#nav {

 

2

width:225px;

 

3

list­style:none;

 

4

height:620px;

 

5

float: left;

 

6

 

}

7

 

8

ul#nav

li

{

9

display:block;

 

10

text­indent:­9999px;

 

11

text­decoration:none

12

}

13

14

ul#nav

li

a

{

15

width:225px;

 

16

display:block

 

17

}

18

19

ul#nav

li

a

span

{

20

float:left;

 

21

display:block

 

22

}

23

24

ul#nav

li#nav­1

a

{

25

height:50px;

 

26

 

no­repeat 0 0px

27

}

28

29

ul#nav li#nav­1 a:active,

 

30

ul#nav li#nav­1 a:hover {

31

background­position: ­225px 0px

32

}

33

34

ul#nav

li#nav­2

a

{

35

height:50px;

 

36

 

no­repeat 0 ­50px

37

}

38

39

ul#nav li#nav­2 a:active,

 

40

ul#nav li#nav­2 a:hover {

41

background­position: ­225px ­50px

42

}

43

44

ul#nav

li#nav­3

a

{

45

height:50px;

 

46

 

no­repeat 0 ­100px

47

}

48

49

ul#nav li#nav­3 a:active,

 

50

ul#nav li#nav­3 a:hover {

51

background­position: ­225px ­100px

52

}

53

54

ul#nav

li#nav­4

a

{

55

height:50px;

 

56

 

no­repeat 0 ­150px

57

}

58

59

ul#nav li#nav­4 a:active,

 

60

ul#nav li#nav­4 a:hover {

61

background­position: ­225px ­150px

62

}

63

64

ul#nav

li#nav­5

a

{

65

height:50px;

 

66

 

no­repeat 0 ­200px

67

}

68

69

ul#nav li#nav­5 a:active,

 

70

ul#nav li#nav­5 a:hover {

71

background­position: ­225px ­200px

72

}

HTML - navigation chunk

1

<li id="nav­1"><a href="#" title="HOME"><span>HOME</span></a></li

2

<li id="nav­2"><a href="#" title="ABOUT US"><span>ABOUT US</span>

3

<li id="nav­3"><a href="#" title="SERVICES"><span>SERVICES</span>

4

<li id="nav­4"><a href="#" title="RECRUITMENT"><span>RECRUITMENT<

5

<li id="nav­5"><a href="#" title="CONTACT US"><span>CONTACT US</s

Wayfinder call

1

<ul id="nav">

2

3

[!Wayfinder?startId=`0`&rowIdPrefix=`navigation`!]

4

5

</ul>

The site is a development site at http://www.presspointproofing.co.uk/easton

(http://www.presspointproofing.co.uk/easton)

markhurd Reply #8, 3 years, 4 months ago (/thread/17984/tutorial-single-level-navigation- using-single-image-replacement#dis-post-98538) @c-m Why the extra <span> in
markhurd Reply #8, 3 years, 4 months ago (/thread/17984/tutorial-single-level-navigation- using-single-image-replacement#dis-post-98538) @c-m Why the extra <span> in

markhurd Reply #8, 3 years, 4 months ago (/thread/17984/tutorial-single-level-navigation-

using-single-image-replacement#dis-post-98538)

markhurd Reply #8, 3 years, 4 months ago (/thread/17984/tutorial-single-level-navigation- using-single-image-replacement#dis-post-98538) @c-m Why the extra <span> in

@c-m

Why the extra <span> in your links? You could probably yank that entirely and accomplish the

(http://forums.modx.com/user/? same result using just the <li> and <a>.

user=18374)

69

Make sure you give both the <li> and <a> a height. Here's my similar CSS from another project:

1

ul#primary­nav li {

2

float: left;

3

text­indent: ­1000em;

4

background­position: 0 0;

5

background­repeat: no­repeat;

6

}

7

8

ul#primary­nav li, ul#primary­nav a {

9

display: block;

10

height: 26px;

11

}

12

13

ul#primary­nav a:hover {

14

background­position: 0 ­26px;

15

}

16

17

li#primary­nav­2 a {

18

width: 102px;

19

background­image: url("../images/site/nav/nav_about­us.png")

20

}

21

22

//rest of primary­nav­# a

  • c-m Reply #9, 3 years, 4 months ago (/thread/17984/tutorial-single-level-navigation-using-
    Thanks,

HTML - navigation chunk 1 <li id= "nav­1" ><a href= "#" title= "HOME" ><span>HOME</span></a></li 2 <li
HTML - navigation chunk 1 <li id= "nav­1" ><a href= "#" title= "HOME" ><span>HOME</span></a></li 2 <li

single-image-replacement#dis-post-98539)

I have removed the span tags and added image heights but my background is not displaying at

(http://forums.modx.com/user/? all:

user=4429)

429

Here is the CSS

1

html,

body

{

2

margin: 0;

3

padding: 0;

4

}

5

6

body

{

7

font­family: Verdana, Arial, Helvetica, sans­serif;

8

font­size: 10px;

9

 

color: #000000;

 

10

background: #d5d5d5;

 

11

}

12

13

14

#page­container {

 

15

 

width: 960px;

16

margin: 0px auto;

 

17

background­color:#ffffff;

 

18

}

19

20

21

22

/****** layout columns ******/

 

23

 

24

#header {

 

25

 

height: 200px;

 

26

width: 960px;

27

background: #ffffff

 

no­repeat;

28

}

29

30

31

32

33

34

35

36

/* VERTICAL NAVIGATION BAR

 

37

 

/////////////////////////////////////*/

38

 

39

40

 

ul#nav {

 

41

 

width:225px;

 

42

list­style:none;

 

43

height:620px;

44

float: left;

 

45

 

}

46

 

47

 

ul#nav

li

{

48

 

display:block;

 

49

text­decoration:none;

 

50

height: 50px;

 

51

}

52

53

 

ul#nav

li

a

{

54

width

:

225px;

55

display : block;

56

height

:

50px;

57

text­decoration : none;

 

58

}

59

60

61

 

ul#nav

li#nav­1

a

{

62

 

height:50px;

 

63

 

no­repeat 0 0px

64

}

65

66

 

ul#nav li#nav­1 a:active,

 

67

ul#nav li#nav­1 a:hover {

68

 

background­position: ­225px 0px

69

}

70

71

 

ul#nav

li#nav­2

a

{

72

 

height:50px;

 

73

 

no­repeat 0 ­50px

74

}

75

76

 

ul#nav li#nav­2 a:active,

 

77

ul#nav li#nav­2 a:hover {

78

 

background­position: ­225px ­50px

79

}

80

81

 

ul#nav

li#nav­3

a

{

82

 

height:50px;

 

83

 

no­repeat 0 ­100px

84

}

85

86

 

ul#nav li#nav­3 a:active,

 

87

ul#nav li#nav­3 a:hover {

88

 

background­position: ­225px ­100px

89

}

90

91

 

ul#nav

li#nav­4

a

{

92

 

height:50px;

 

93

 

no­repeat 0 ­150px

94

}

95

96

 

ul#nav li#nav­4 a:active,

 

97

ul#nav li#nav­4 a:hover {

98

 

background­position: ­225px ­150px

99

}

100

101

 

ul#nav

li#nav­5

a

{

102

 

height:50px;

 

103

 

no­repeat 0 ­200px

104

}

105

106

 

ul#nav li#nav­5 a:active,

 

107

ul#nav li#nav­5 a:hover {

108

 

background­position: ­225px ­200px

109

}

110

111

112

113

#sidebar {

 

114

height: 470px;

 

115

width: 230px;

116

float: right;

117

margin: 50px 50px 50px 25px;

118

}

119

120

121

#content {

 

122

height: 570px;

 

123

width: 400px;

124

line­height: 18px;

125

margin­left: 225px;

126

margin­right: 230px;

127

}

128

129

130

#footer {

131

height: 42px;

 

132

width: 675px;

133

margin­left: 225px;

134

margin­right: 50px;

135

line­height: 18px;

136

margin­top: 5px;

 

137

background: #ffffff;

138

}

139

140

141

142

/******* content styles *******/

143

144

#content

h1

{

145

margin: 0;

146

padding: 0;

147

font­family: Verdana, Arial, Helvetica, sans­serif;

148

padding­bottom: 15px;

149

 

font­weight: 400;

150

font­size: 22px;

151

color: #981c1e;

152

}

153

154

#content

h2

{

155

margin: 0;

156

padding: 0;

157

padding­bottom: 15px;

158

font­family: Verdana, Arial, Helvetica, sans­serif;

159

 

font­weight: 300;

160

font­size: 18px;

161

color: #981c1e;

162

}

163

164

#content

p

{

165

margin: 0;

 

166

padding: 0;

167

font­family: Verdana, Arial, Helvetica, sans­serif;

168

font­size: 10px;

 

169

color: #000000;

170

}

171

172

#content

a

{

173

margin: 0;

 

174

padding: 0;

175

font­family: Verdana, Arial, Helvetica, sans­serif;

176

font­size: 12px;

 

177

color: #981c1e;

178

text­decoration: none;

179

}

180

181

.padding {

 

182

padding: 50px 25px 10px 25px;

183

}

184

185

.footerpadding {

 

186

padding: 5px 50px 10px 25px;

187

}

The website is here:

http://www.presspointproofing.co.uk/easton/ (http://www.presspointproofing.co.uk/easton/)

@c-m Your CSS is targeting an ID of "nav-1" but your source code is showing "navigation1".
@c-m
Your CSS is targeting an ID of "nav-1" but your source code is showing "navigation1". I made a
quick change in Firebug and got your background image to show. Just make sure your image is
positioned correctly (it appears to be a set of sprites).
(http://forums.modx.com/user/?
user=18374)
You'll also want to put a negative text-indent on either the a or li element to hide the text.
69
< (/thread/17984/tutorial-single-level-navigation-using-single-image-replacement)