Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2013-09-04 15:56:14
- thaicares
- Member
- Registered: 2013-08-20
- Posts: 14
I'm looking for a navigation menu with submenus!
I don’t want the dropdown kind… I want a seperate horizontal navbar to popup that is related to the nav link you scroll over! My issue is I’m unsure of how to do this, I believe if I could get <ul><li><ul><li></li></ul><li></ul> nesting to work properly it might work… but I’m not sure because I don’t know how to go about it my previous attempts haven’t worked. Any help would be appreciated
My current <nav> is <txp:section_list> which I will probably exclude sections from because not all are relevant to the <nav>
Offline
Re: I'm looking for a navigation menu with submenus!
@Thaicares, I focus on meaning when writing the markup. You can usually use CSS to make the layout the way you want. Also, the hover event is not supported on any touch device, so if you’re hiding something, it’s important to make sure that the hidden stuff isn’t very important and/or there are other ways to reach that content. In order to make capable browsers detect hover events and show the hidden content, you’ll need to use some JavaScript, like jQuery—CSS can’t do it alone.
Something like this might work:
<ul class='menu-main'>
<li>
<a href='#' id='section-menu-label-1'>Section 1 title</a>
<ul class='menu-sub' id='section-menu-1'>
<li><a href='#'>Section 1 item</a></li>
<li><a href='#'>Section 1 item</a></li>
<li><a href='#'>Section 1 item</a></li>
</ul>
</li>
<li>
<a href='#' id='section-menu-label-2'>Section 2 title</a>
<ul class='menu-sub' id='section-menu-2'>
<li><a href='#'>Section 2 item</a></li>
<li><a href='#'>Section 2 item</a></li>
<li><a href='#'>Section 2 item</a></li>
</ul>
</li>
<!-- ... -->
</ul>The CSS can be hairy, depending on your overall layout needs and the @media viewport breakpoints. I’d rather not post anything here to vex you, but you can find countless code examples and tutorials using the Google. The jQuery might look something like this:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script>
$(function() {
$('.menu-sub').hide();
$('#section-menu-label-1').hover(
function() {
$('section-menu-1').slideDown();
},
function() {
$('section-menu-1').slideUp();
}); // end .hover
$('#section-menu-label-2').hover(
function() {
$('section-menu-2').slideDown();
},
function() {
$('section-menu-2').slideUp();
}); // end .hover
// ...
}); // end .ready
</sctipt>Offline
#3 2013-09-04 17:47:49
- thaicares
- Member
- Registered: 2013-08-20
- Posts: 14
Re: I'm looking for a navigation menu with submenus!
Thought I figured it out…
GOT THIS:
Tag error: <txp:section wraptag=“li” link=1 title=1 name=“about” /> -> Textpattern Warning: Attribute values must be quoted while parsing form nav on page default
also the submenus are displaying but ALWAYS even though by default it is set to display:none;
Offline
Re: I'm looking for a navigation menu with submenus!
txp:tags work like XML: The attribute values always need to be in quotes. Try link="1" and title="1".
I don’t know if you’ll get a lot of help with your CSS questions in this forum, but without seeing the code you’re using, it’s impossible to make any suggestions. You might get more helpful feedback if you use jsFiddle to post the HTML, CSS, and JS you’re working on and share the link here.
Offline
Re: I'm looking for a navigation menu with submenus!
if it is something like this (css-menu.html )
you find a toturial here
there is no Javascript needed. Hope it helps
Greetz
[Axel]
Last edited by [Axel] (2013-09-04 20:18:29)
Greetz [Axel]
Offline
#6 2013-09-04 21:17:51
- thaicares
- Member
- Registered: 2013-08-20
- Posts: 14
Re: I'm looking for a navigation menu with submenus!
[Axel] that is closer to what I want! I found an example of ALMOST exactly what I want here… http://jsfiddle.net/te5AU/2/ but when I took instruction from it I got the error I mentioned above. which johnstephans DID NOT get fixed by putting quotes around the number 1 it actually made the link and attached submenu disappear altogether. Although I guess the error disappeared as well!
Offline
#7 2013-09-04 21:18:28
- thaicares
- Member
- Registered: 2013-08-20
- Posts: 14
Re: I'm looking for a navigation menu with submenus!
Thank you both for the activity I thought I was gonna get next to no responses!
Offline
Re: I'm looking for a navigation menu with submenus!
Here is the one I use Free Style Menu, very expandable.
Offline
#9 2013-09-07 00:26:22
- thaicares
- Member
- Registered: 2013-08-20
- Posts: 14
Re: I'm looking for a navigation menu with submenus!
http://jsfiddle.net/QEYMA/9/
above is NEARLY identical to what I want… the issue is it does not work unless set {float:left} but I would prefer the whole thing centered!
txp presents a new difficulty also: (http://thaicares.com/ to see the navigation mess)
<txp:section wraptag=“li” link=‘1’ title=‘1’ name=“articles”>
<txp:category_list wraptag=“ul” break=“li” />
</txp:section>
I believe because I used it as a container tag as opposed to <txp /> the name=“articles” doesn’t know what to do and the links are blank? The nesting is necessary for the menu and submenu though…
I’m using category_list because I can not get linklist to work even as well as the current mess!
BUT the real issue with the txp markup is that in the submenu txp produces a blank box formatted the same way the main links are. I think it might have something to do with the <ul> and <li> are stacked because of my txp markup.
Last edited by thaicares (2013-09-07 03:26:56)
Offline
Re: I'm looking for a navigation menu with submenus!
Tyler
Do any of these articles help inspire the solution you are looking for?
This one deals with categories in particular.
Offline
#11 2013-09-07 12:57:10
- GugUser
- Member
- From: Quito (Ecuador)
- Registered: 2007-12-16
- Posts: 1,477
Re: I'm looking for a navigation menu with submenus!
Your example below will not work for what you want:
<txp:section wraptag=“li” link=‘1’ title=‘1’ name=“articles”>
<txp:category_list wraptag=“ul” break=“li” />
</txp:section>You have to use section_list:
<txp:section_list name="articles, and, others" wraptag="ul" break="">
<!-- inside how you want to show the sections and each subnav -->
</txp:section_list>I prefer to work with forms:
<txp:section_list name="articles, and, others" wraptag="ul" form="nav-sections" />Then you make a form named “nav-sections”, basically for example:
<li<txp:if_section name='<txp:section />'> class="active"><txp:section title="1" />
<txp:else />>
<a href="/<txp:section />"><txp:section title="1" /></a></txp:if_section></li>You can expand this according to your requirements for the subnav, for example with category_list.
Last edited by GugUser (2013-09-07 13:55:27)
Offline
#12 2013-09-07 19:17:28
- thaicares
- Member
- Registered: 2013-08-20
- Posts: 14
Re: I'm looking for a navigation menu with submenus!
GugUser: why do I have to do section_list? I don’t want to include EVERY section! The only way to make it work is to go into my nav form and exclude every new section I don’t want to include. Are you saying that the txp markup just won’t work? I think I would prefer to stay away from the list because the markup is a little messy for my taste (my eyes just don’t care for it all) I’m actually using category_list would prefer to use linklist though for submenu’s.
thaicares.com/
The current issue’s I have with it as you can see above:
the submenu’s have the extra blank link
also they don’t fit in the border lines
and the menu is floated left and I don’t know how to make it center…
Offline