SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Apply styling to an element only if it has child nodes?

    I'm working with a menu system (WordPress) that outputs markup on custom menus like so:

    HTML Code:
    <ul class="menu">
    	<li class="current-menu-item current_page_item"><a href="site.com">About Us</a>
    		<ul class="sub-menu">
    			<li class=""><a href="site.com/our-charity-partners/">Our Charity Partners</a></li>
    			<li class=""><a href="site.com/privacy-policy/">Privacy Policy</a></li>
    		</ul>
    	</li>
    	<li class=""><a href="site.com/apparel/">Buy Apparel</a>
    		<ul class="sub-menu">
    			<li class=""><a href="site.com/benevolent-elephan/">Benevolent Elephant</a>
    				<ul class="sub-menu">
    					<li class=""><a href="site.com/benevolent-elephant-short-sleeve/">Benevolent Elephant Short Sleeve</a></li>
    					<li class=""><a href="site.com/benevolent-elephant-long-sleeve/">Benevolent Elephant Long Sleeve</a></li>
    				</ul>
    			</li>
    			<li class=""><a href="site.com/eagle-spirit/">Eagle-Spirit</a>
    				<ul class="sub-menu">
    					<li class=""><a href="site.com/eagle-spirit-short-sleve/">Eagle-Spirit Short Sleeve</a></li>
    					<li class=""><a href="site.com/awards-honors/">Eagle-Spirit Long Sleeve T-Shirts</a></li>
    				</ul>
    			</li>
    		</ul>
    	</li>
    </ul>
    Is there a way in CSS, without altering the markup, to add a generated content marker after each menu item that has child nodes (&darr; for top level items and &rarr; for submenu items)?

    If not, please feel free to move this to the javascript section.

  2. #2
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You couldn't add markup with CSS but you can add background images.

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Andres Vaquero View Post
    You couldn't add markup with CSS but you can add background images.
    That would be very easy. These are dynamically generated menus, so I need a dynamic solution. If Its not possible with css, I'm sure I can do it with javascript.

  4. #4
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes totally, but then it is better to use only CSS while you can, and I think that what you want to achieve could be perfectly accomplished with CSS bg images/sprites. When you say that the menus are dynamically generated I do not know if the name of the classes or the markup changes but I'm pretty sure you can find a fix purely with CSS.

  5. #5
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm open to a pure CSS solution, and if there is one to be had, history has shown me this is the place to find it, but until then, here's my jQuery/CSS solution;

    Code:
    <script type="text/javascript">
      jQuery("#menu-site-menu > li").has("ul").addClass("hasChild top").find("li").has("ul").addClass("hasChild sub");
    </script>
    Code:
    li.hasChild.top:after,li.hasChild.sub:after {
    	content:' ';
    	height:0;
    	position:absolute;
    	bottom:-3px;
    	right:-5px;
    	width:0;
    	border:5px solid transparent;
    	border-top-color:#fff;
    	}
    
    li.hasChild.sub:after {
    	top:9px;
    	border-top-color:transparent;
    	border-left-color: #ccc;
    	}

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Scott,

    We had a recent css quiz where arrows were added automatically to drop downs which seems to do what you want.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •