We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Need suggestion for menu. What would you do?

    • 2782
    • 10 Posts
    bardia Reply #1, 17 years, 2 months ago
    Are about to make this menu for working with MODx. But I’m not sure how to make it. CSS? Javascript with preloaded images? What would you do?



    Appreciate all answers/suggestions smiley
      • 16183
      • 1,390 Posts
      kongondo Reply #2, 17 years, 2 months ago
      It’s hard to tell from the photo only...but if you are not looking for some fancy animations, then you could do that with one CSS sprite

      cheers/k
        Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder
        • 2782
        • 10 Posts
        bardia Reply #3, 17 years, 2 months ago
        No animations. Only the "arrow"-thing changes from gray to red when one of the links is active. So CSS is the thing for this menu? laugh
          • 16183
          • 1,390 Posts
          kongondo Reply #4, 17 years, 2 months ago
          Ye..it is an option. Create one image that represents all the menu states you want...the rest is just use of CSS selectors and some calculations to position the portion of the image you want shown for each respective menu item...Just look up CSS sprites if you aren’t familiar with the technique... smiley The Hjem, Kontact, etc don’t have to be part of the image by the way...unless you want them to be...

          cheers/k
            Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder
            • 21417
            • 486 Posts
            nickf08 Reply #5, 17 years, 2 months ago
            cool graphic - I’d run it as css only - like the attached image - with one image per menu item - and change the background position with css relative to the active state.

              Web design Adelaide
              http://gocreate.com.au
              • 2782
              • 10 Posts
              bardia Reply #6, 17 years, 2 months ago
              Awsome!!! Thanks guys! I’m reading some stuff about CSS sprites now - this is new technique for me. smiley
                • 24935
                • 160 Posts
                rfoster Reply #7, 17 years, 2 months ago
                I would use this code:
                <div id="nav">
[!Wayfinder? &startId=`0` &level=`1`!]
</div>


                With this css:
                #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
#nav li {
	float: left;
	padding-bottom:12px;
	background: #adadad url(hjem.gif) no-repeat scroll center top;
}
#nav li.active {
	background-position:center bottom;
}
#nav a {
	display: block;
	text-align:center;
	height:52px;
	line-height:52px;
	width:100px;
	text-transform:uppercase;
	color:#555;
	text-decoration:none;
	font-size:17px;
}
#nav a:hover {
	color:#000;
}


                And I would remove the text from the background image.
                  • 2782
                  • 10 Posts
                  bardia Reply #8, 17 years, 2 months ago
                  Hehe! Thanks rfoster, you maked my day! laugh Just tried the css and its working, GREAT smiley

                  So, by doin’ it this way I’ll guess its easy to make the site multilingual.