CMS Made Simple Forums

Posted: **Mon Jan 26, 2015 3:04 pm**

currently working on a new theme for my website, right now im working on my navigation menu (using menumanager) however im struggling with a few issues:

1) This theme is responsive so if you were to view it on a mobile device, the layout is optimized for that device, part of that optimization is the way the menu looks, when responsive the menu is shown as a dropdown list which is fine, the problem is that if i select a page the next time i click the menu dropdown, the selected page has a blank link in its list, if i were to click it, it would take me to http://www.mydomain.com/undefined. How do i remove this link?

1B) Not a major issue, but a related issue none the less. when viewing on a mobile device, if i click a link from the dropdown nav menu, then breifly before the page starts to load, the tick that shows which page im on, goes to the page i just selected, but apart from that the tick stays next to 'navigation..' at the top of the list (meaning its never on the selected page apart from the instance i just described)

and finally ..

2)

Im having issues getting menumanager to act correctly with styles, for example:

current page shows fine and hover shows fine.

But when it comes to children pages the problems begin, If i were to hover over a child page it doesnt have the same reaction as if i were to hover over a parent page. Also if im on a child page id like for the parent page to be highlighted as the current page (and the child page to do the same when the menu is accessed)

to clarify: (1) & (1b) are issues with the mobile version

(2) is an issue when viewing normally on pc.

For reference the site in question is http://www.seenoequal.com/home

my code in menu manager is:

Code: Select all

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul class="clearfix">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul class=\"sub_nav\">" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}


{if $node->depth == 1}<li class="parent">{/if}


{if $node->current == true}<li class="current">{/if}



<a href="{$node->url}" class="{if $node->depth == 1}parent{/if}

{if $node->current == true or $node->parent == true}current{/if}

{if $node->prevdepth == 1}active{/if}

{if $node->depth == 1}active{/if}"

{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}</a>

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>

{/if}

the code used in the example page for my theme was pure html:

Code: Select all

<!-- nav -->

<nav id="main-nav">
		<ul>
			<li class="current">
				<a href="index.html">Home</a>
			</li>
			<li>
				<a href="#">Pages</a>
				<ul>
					<li>
						<a href="#">Homepages</a>
						<ul>
							<li>
								<a href="index.html">Homepage Revolution</a>
							</li>
							<li>
								<a href="home-fullslider.html">Homepage Fullslider</a>
							</li>
							<li>
								<a href="home-masonry.html">Homepage Masonry</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Artists</a>
						<ul>
							<li>
								<a href="artists.html">Arists 01</a>
							</li>
							<li>
								<a href="artists2.html">Arists 02</a>
							</li>
							<li>
								<a href="artist.html">Single Artist 01</a>
							</li>
							<li>
								<a href="artist2.html">Single Artist 02</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Releases</a>
						<ul>
							<li>
								<a href="releases3.html">Releases 3 Columns</a>
							</li>
							<li>
								<a href="releases.html">Releases 4 Columns</a>
							</li>
							<li>
								<a href="release.html">Single Release 01</a>
							</li>
							<li>
								<a href="release2.html">Single Release 02</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Events</a>
						<ul>
							<li>
								<a href="events.html">Events</a>
							</li>
							<li>
								<a href="event.html">Single Event</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Gallery</a>
						<ul>
							<li>
								<a href="gallery.html">Gallery</a>
							</li>
							<li>
								<a href="gallery-album.html">Single Gallery Album</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Blog</a>
						<ul>
							<li>
								<a href="blog.html">Blog Entries</a>
							</li>
							<li>
								<a href="blog-single.html">Single Entry</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="grid.html">Grid</a>
					</li>
					<li>
						<a href="elements.html">Elements</a>
					</li>
					<li>
						<a href="404.html">404</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="artists.html">Artists</a>
			</li>
			<li>
				<a href="releases.html">Releases</a>
			</li>
			<li>
				<a href="events.html">Events</a>
			</li>
			<li>
				<a href="gallery.html">Gallery</a>
			</li>
			<li>
				<a href="blog.html">Blog</a>
			</li>
			<li>
				<a href="contact.html">Contact</a>
			</li>
		</ul>
	</nav>
	<!-- /nav -->

and here is all the css i have in relation to my menu navigation:

Code: Select all

/* Navigation
 ---------------------------------------------------------------------- */

/* --- MAIN NAVIGATION --- */
#main-nav { 
	float: right;
	border-right: 1px solid #242424;
	border-left: 1px solid #111;
	z-index: 100;
}

		#main-nav li {
			list-style: none;
			float: left;
			margin: 0;
			position: relative;
		}

			#main-nav a {
				color: #fff;
				font-size: 12px;
				font-weight: 800;
				display: block;
				padding: 0 20px;
				line-height: 86px;
				border-left: 1px solid #242424;
				border-right: 1px solid #111;
				position: relative;
				text-align: center;
				text-transform: uppercase;
				z-index: 98;
			}

				#main-nav a:hover, #main-nav .hover > a, #main-nav .current > a, #main-nav .active > a {
					color: #fa4c29;
				}

				#main-nav a:hover, #main-nav .hover > a, #main-nav .current > a { background-color: #121212; border-right: 1px solid #0f0f0f; }
				#main-nav .active > a { background-color: #121212; }

			/* Sub nav */
			#main-nav ul ul {
				background: #161616;
				-webkit-box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, .2);
				   -moz-box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, .2);
						box-shadow: 2.5px 2.5px 5px rgba(0, 0, 0, .2);
				display: none;
				left: 0;
				padding: 0;
				position: absolute;
				top: 86px;
				width: 200px;
				z-index: 300;
			}

				#main-nav ul ul li { float: none; }

					#main-nav ul ul a {
						border: 0;
						border-bottom: 1px solid #0a0a0a;
						border-top: 1px solid #1f1f1f;
						color: #aaa;
						display: block;
						font-size: 11px;
						letter-spacing: 0;
						padding: 12px 20px !important;
						text-align: left;
						text-transform: none;
						line-height: normal;
					}

						#main-nav ul ul a:hover, #main-nav ul ul .hover > a, #main-nav ul ul .current > a, #main-nav ul ul .current > a:hover {
							background: #121212;
							border-right: none;
							color: #fff;
						}

			/* Dropdown */
			#main-nav ul ul ul {
				left: 100% !important;
				top: 0 !important;
			}

	/* Responsive Nav */
	#main-nav .responsive-nav {
		background-image: url(../img/responsive-nav.png);
		background-color: #111;
		border: none;
		background-position: center right;
		background-repeat: no-repeat;
		display: none;
		width: 100%;
		color: #fff;
	}

is there anybody that can offer guidance with my situation?

Posted: **Mon Jan 26, 2015 7:23 pm**

To help with #1:

replace

Code: Select all

{if $node->depth == 1}<li class="parent">{/if}


{if $node->current == true}<li class="current">{/if}

with:

Code: Select all

{if $node->depth == 1}
   <li class="parent{if $node->current == true} current{/if}">
{elseif $node->current == true}
   <li class="current">
{/if}

For the current page 2 opening li tags were being output:

Code: Select all

<li class="parent">

<li class="current">

Posted: **Mon Jan 26, 2015 7:37 pm**

Thanks chris, worked nicely!

Posted: **Wed Jan 28, 2015 1:30 pm**

anybody have any ideas for #2?

Posted: **Wed Jan 28, 2015 3:23 pm**

It looks like you need to style your css as required:
#main-nav a.current.active {...} - for the top level menu
and
#main-nav ul ul a.active {...} - for the child page

Posted: **Thu Jan 29, 2015 1:39 pm**

hi chris, is it possible you cold provide examples using the css ive provided? im not too strong on css, so im not sure how to approach this

CMS Made Simple Forums

Menumanager design and responsive layout

Menumanager design and responsive layout

Re: Menumanager design and responsive layout

Re: Menumanager design and responsive layout

Re: Menumanager design and responsive layout

Re: Menumanager design and responsive layout

Re: Menumanager design and responsive layout