Help with Horizontal Image Menu

[BBLinda]

Hi,

I hope you can help me out here...
I am a total newbie with CMSms and I need to implement a horizontal navigation bar with images instead of text. I read all tutorials, and while I do know how to set it up in html/css, I have no clue how to change the menu template accordingly.

Here is the html for the navigation bar:

This is the css:

#menu {
background:url(uploads/images/navbar.gif) top left no-repeat;
float:right;
width:563px;
height:20px;
margin-top:96px;
z-index:2;
}
#menu li {
list-style: none;
float:left;
}
#menu a {
display: block;
height: 20px;
outline: none;
text-indent: -9999px;
}

li#i1 {width:87px;}
li#i1 a:hover {
background: url(uploads/images/navbar.gif) 0 -21px no-repeat;
}
li#i2 {width:89px;}
li#i2 a:hover {
background: url(uploads/images/navbar.gif) -87px -21px no-repeat;
}
li#i3 {width:80px;}
li#i3 a:hover {
background: url(uploads/images/navbar.gif) -176px -21px no-repeat;
}
li#i4{width:81px;}
li#i4 a:hover {
background: url(uploads/images/navbar.gif) -256px -21px no-repeat;
}
li#i5{width:90px;}
li#i5 a:hover {
background: url(uploads/images/navbar.gif) -337px -21px no-repeat;
}
li#i6{width:110px;}
li#i6 a:hover {
background: url(uploads/images/navbar.gif) -427px -21px no-repeat;
}
li#i7 {width:26px;}
li#i7 a:hover {
background: url(uploads/images/navbar.gif) -537px -21px no-repeat;
}

It was working ok when testing before preparing for CMSms. So the code here shouldn't be the problem (I hope

Can anybody in here please help me of how to implement this now into the menu manager?
I would appreciate it very much.

The previous "plain" version is here:
http://nspirationplus.com/_test/

[Wishbone]

For simplicity, since it is a graphical menu, you might want to just hard-code the menu in the template and not use the Menu Manager. Just replace {menu} with your html menu.

The menu manager gives you the benefit of dynamic menus. With a graphical menu, you can't really leverage this feature, as you will have to update your navbar.gif each time you change your menu structure.

[BBLinda]

@wishbone

Thanks a lot for your very quick reply.

So if I "hardcode" the menu, how do I set the file names of the pages? I haven't seen the option within the page section to custom name the html files. Because then, the navigation links will be set within the template html as well, correct?

[Wishbone]

When creating/editing a page, look in the "Options" tab at the field called "Page Alias". You can set the page alias to be whatever you want. If you don't set this value, the system will automatically fill it out for you based on the title of the page.

If you're using Pretty URLs, the page URL is:
http://yourdomain.com/page-alias

If you're not using Pretty URLs, the page URL is:
http://yourdomain.com/?page=page-alias

[BBLinda]

Thanks again

I am a bit confused....so in this case, the page's file names won't include .html?

[Wishbone]

It can, if you want it to. If you're using Pretty URLs, you can have it end with whatever extension you want with a minor change to your .htaccess file. Some of us use the .html extension, most do not.

Have you installed and experimented with this CMS yet?

[Wishbone]

Remember, they aren't really files. All pages are stored in a database. The URL tells the CMS which information to get from the database. If pretty URLs are turned on, the URL makes it look like files.

[BBLinda]

You are awesome, really appreciate your detailed explanation

Yes, I installed the CMS already, but so far only set up the template for the home page and the css/js etc.
Just a bit confused how to name the links in the menu, but if I understood right, they are supposed to look like "/about, /services" etc., if I don't use pretty URLs?

What is better for SEO?

[Wishbone]

No... Here are examples:

Pretty URLs:
http://yourdomain.com/page-alias    (optionally, you can use .html or whatever)

Standard (ugly?) URLs:
http://yourdomain.com/?page=page-alias

Pretty URLs are better for SEO.

[BBLinda]

Hi again....

Somehow my URLs are not working....I type in for example, aboutus as the alias, expecting the new url being http://www.mydomain.com/aboutus but it isn't working.
My static menu now links to /aboutus, but when I click it, I get a page not found error..............

What am I doing wrong?

[Wishbone]

You probably don't have Pretty URLs turned on. Look in your config.php file, under "URL Settings" for instructions on how to activate it (there are a couple of steps to this).

Try for now: http://mydomain.com/?page=aboutus and see if that works.

[BBLinda]

Hi,

Nope, doesn't work....changed the config.php and the .htaccess file, but still, doesn't work.
Maybe I am too tired or I don't know what I am doing wrong........

I followed the instructions:

$config['url_rewriting'] = 'mod_rewrite';
$config['page_extension'] = '/';
$config['use_hierarchy'] = true;
$config['query_var'] = 'page';

and for the .htaccess file I used the one in the /doc folder:

# Attempt to override some php settings, these settings may be helpful on some hosts if your
# default configuration does not meet CMS's minimum requirements, and your host
# has given your account appropriate permissions
#php_value upload_max_filesize "10M"
#php_value session_save_path "tmp/cache"

#php_flag magic_quotes_gpc Off
#php_flag register_globals Off
#php_flag session.use_trans_sid Off

# (this is important, so uncomment if your host permit)
#Options -Indexes
#ServerSignature Off

#Options +FollowSymLinks

# To prevend E_STRICT problems with PHP 5.3+ you can uncomment the following lines
# Note: These settings should only be enabled for production sites!
#php_flag display_startup_errors 0
#php_flag display_errors 0
#php_flag html_errors 0
#php_value docref_root 0
#php_value docref_ext 0


RewriteEngine on
#
#Sub-dir e.g: /cmsms
RewriteBase /

# 301 Redirect all requests that don't contain a dot or trailing slash to
# include a trailing slash
# but ignore POST requests.
#RewriteCond %{REQUEST_URI} !/$
#RewriteCond %{REQUEST_URI} !\.
#RewriteCond %{REQUEST_METHOD} !POST$
#RewriteRule ^(.*) %{REQUEST_URI}/ [R=301,L]

# Rewrites urls in the form of /parent/child/
# but only rewrites if the requested URL is not a file or directory
#
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ index.php?page=$1 [QSA]

[Dr.CSS]

It is very easy to do image menus, use text-indent to remove the text from menu items then call the image per link as you would any other site, you may have to make a custom menu template with class='{$node->alias}' to the li so each link has a unique class for styling...

li.contact-us a {background-image: url(path/to/image.jpg) etc.etc...

I recommend using the text over the background image, as you won't have to make new images any time there is a page change, it would help to see what it should look like...

[Wishbone]

Hi,

Nope, doesn't work....changed the config.php and the .htaccess file, but still, doesn't work.
Maybe I am too tired or I don't know what I am doing wrong........

Can you post the URL to your CMSMS install?

Does your host support .htaccess files and mod_rewrite?

@Dr.CSS: What benefit would there be for using the menu manager for image menus other than re-ordering? I was thinking of writing a module that would use the GD library to do graphical menus.. Would have to cache menu items. I have something similar, but not CMSMS compatible.

[BBLinda]

Can you post the URL to your CMSMS install?

http://www.nspirationplus.com/ (the start page is _index.php)

Does your host support .htaccess files and mod_rewrite?

As far as I know, they do, I use the same provider many years, but I will ask.


@Dr.CSS:

I did build the menu with images already, static, but couldn't get it implemented into CMSMS, because I totally failed with adapting the menu template..........so now I have it "hardcoded" as suggested by wishbone.

A link to the static menu is here:
http://www.nspirationplus.com/_index.php