- This topic is empty.
-
AuthorPosts
-
December 21, 2012 at 2:09 am #41496
nickwinters
ParticipantHello,
I’m trying to figure out how I can go about creating a menu layout that is similar to the following concept: http://bel50.com/ . I like how the logo seems to split the menu in half. I’m sure I could create this with a static webiste. However, I’m trying to figure out the best way to create this when dealing with a CMS that generates menu items like Joomla, WordPress, or Drupal? How do you specify that you want, say, the 3rd menu item specifically to have padding, or margin on one side?
I used the inspector for the example site that I listed and noticed that the following was being used:
#primary_nav li + li + li {margin-left: 255px;}I’ve also seen other methods performed. Does anyone have any other recommendations on how this could be achieved when taking a CMS into account? I’m also concerned about browser compatibility. Looking forward to suggestions. Thanks!
December 21, 2012 at 3:10 am #118371danieldatton
MemberFor a CMS, unless you want to write code for it to output each li with its own class, using
#primary_nav li + li + li {margin-left: 255px;}
is the cleanest way.
December 21, 2012 at 4:46 am #118383Watson90
MemberChris Spooner who runs [Line25](http://line25.com/ “”) has made a good article on something similar to what you’re after.
[Take a look =)](http://line25.com/tutorials/how-to-code-a-stylish-portfolio-design-in-html-and-css “”)
December 21, 2012 at 11:49 am #118425nickwinters
ParticipantThanks guys! I will do a little more exploring with the suggestions you’ve made.
December 21, 2012 at 12:16 pm #118430chrisburton
ParticipantThis is how I did it with WordPress. I had to create two separate custom menu’s, “Main” and “Secondary”. In the middle I outputted my logo. This allows you to use margin-right for the left menu and margin-left for the right menu.
<?php wp_nav_menu( array('menu' => 'Main', 'container' => '', 'items_wrap' => '<ul id="main">%3$s</ul>' )); ?> <h1 class="logo" alt="Christopher Burton"><?php bloginfo('name'); ?></h1> <?php wp_nav_menu( array('menu' => 'Secondary', 'container' => '', 'items_wrap' => '<ul id="secondary">%3$s</ul>' )); ?>
However, I probably wouldn’t go about it in that way if I could help it. I changed my markup after switching CMS’s and it’s much easier to control adding classes to each list-item.
<nav> <ul> <li class="home"><a href="#">Home</a><li> <li class="about"><a href="#">About</a><li> <li><h1><a class="logo"> href="#">Home</a></h1><li> <li class="news"><a href="#">News</a><li> <li class="projects"><a href="#">Projects</a><li> </ul> </nav>
Result:
December 21, 2012 at 12:42 pm #118441nickwinters
ParticipantNice! Yeah, I read about the nth-child selector option, but read something not too long ago that explained how it wasn’t that widely supported yet. So, I’m thing to figure out what the best option would be. I’d like to just have one menu that selects the 3rd or 4th menu item and tells it to add margin. That seems like it would be the most light-weight option.
December 21, 2012 at 12:50 pm #118449nickwinters
ParticipantAh never mind, that article appears to have a jquery fallback for IE, hah.
December 21, 2012 at 1:01 pm #118453Watson90
MemberWhat’s happening when you hover over articles and store @chrisburton?
Looks very nice, though!
December 21, 2012 at 1:31 pm #118457chrisburton
Participant@Watson90 Forgot to change the hover positions. Fixed.
December 21, 2012 at 1:35 pm #118458chrisburton
Participant@nickwinters You could just use margin-right for all the list-items and then apply `li:last-child { margin-right: 0;}`. If there’s no reason for you to support IE8 or below, I wouldn’t worry about it. However, putting classes on each list-item solves the issue by just calling the last class and setting a 0 margin as shown in my example.
December 21, 2012 at 3:20 pm #118490nickwinters
ParticipantThanks for the feedback @chrisburton! Sadly, I kind of have to worry about IE8 still. The type of traffic my sites get in the IE department seems to be 40-60% IE8. I think it has something to do with the audience demographic in my area. Age group of the users? I dunno, it’s strange when looking at analytics.
December 21, 2012 at 3:41 pm #118507chrisburton
Participant@nickwinters Then, I would go with the second example that I provided with applying classes to the list-items.
March 14, 2013 at 12:59 pm #128209TheLunaticLtd
MemberI found this query since I wanted to do the same thing. Forefathers Group (http://forefathersgroup.com/) does it very nicely and I studied their CSS and HTML to figure it out. Basically, (and bear with me ’cause I’m no designer) they use a simple background image centered with [margin: 0 auto] and z-index’d at 10000, then the four menu items (ul>a>li) are split across the screen. The first 2 are floated left; the second are floated right. Then its margin fiddling to get them all to sit where you want. I have not tested it in anything but FF (Waterfox 18.0.1) but their site is solid so I’d guess it works. Testing will come later for me once other stuff is done.
And it works well for responsive, too.
Anyway, if I can figure this out by studying their method, I know you guys can. I write code thru extreme trial & error not any real knowledge. I borrow that from experts that I find here! I love the open/sharing web community. Thanks to everyone who, explicitly or not, helps me out!
I hope this helps guide others. Since I figured it out for my site, I wanted to share my $0.02.
March 14, 2013 at 1:03 pm #128210Paulie_D
Member>Then its margin fiddling to get them all to sit where you want.
That’s what we want to avoid.
:)
May 1, 2014 at 2:31 pm #169005r3quiem
ParticipantHi @chrisburton
I am very interested in using your technique and was wondering if you could help me.
I am quite new to wordpress and currently have a site set up where I need to repeat your method in the twentyfourteen theme.
I can find my way around css but the php is a little beyond me.
Where would this code need to go? would it need to replace what is there? Or is what you have theme specific?
I would like to have 2 menu’s as you describe, with 4 links in each and an image in the middle.
What would I need to edit, and would I need to create a copy of it in my child theme to avoid update issues?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.