[SOLVED] CSS menu not rendering properly when wrapping

Turbocapitalist · 06-28-2020, 12:26 PM

I have a menu which renders the way it is supposed to as long as it does not need to wrap. See the two images below. The first one is correct. The second one is how it looks when it is looking wrong.

Is there a way that will get the nice effect as shown in the first picture even when wrapping? Or another way to get a similar visual effect would be fine, too, as long as it is 100% CSS.

This is a problem in portrait mode on narrow screens such as certain mobile devices.

Below is the CSS along with the corresponding XHTML.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css" media="screen">
    ul.breadcrumb {
        list-style: none;
        overflow: hidden;
        margin: 0 0 0 -1em;
        padding: 0 0 0 1em;
    }

    ul.breadcrumb li {
        float: left;
        margin-left: 1.5em;
        color: #000;
    }

    ul.breadcrumb li a {
        padding: 0 0 0 1em;
        position: relative;
    }
   
    ul.breadcrumb li a::after {
        z-index: 1;
        content: "";
        width:  0;
        height: 0;
        top: 50%;
        margin: -5ex 0 0 0;
        border-top:    5ex solid transparent;
        border-bottom: 5ex solid transparent;
        position: absolute;
        border-left: 2em solid;
        left: 100%;
    }   
   
    ul.breadcrumb li:first-child  a {
        border-radius: 1em 0 0 1em;
        padding: 0 0 0 1em;
    }
    ul.breadcrumb li:nth-child(1) a       { background:        #f00; }
    ul.breadcrumb li:nth-child(1) a:after { border-left-color: #f00; }
    ul.breadcrumb li:nth-child(2) a       { background:        #ff0; }
    ul.breadcrumb li:nth-child(2) a:after { border-left-color: #ff0; }
    ul.breadcrumb li:nth-child(3) a       { background:        #0f0; }
    ul.breadcrumb li:nth-child(3) a:after { border-left-color: #0f0; }
  </style>
</head>
<body>
  <ul class="breadcrumb">
    <li><a href="">AAAA AAAA AAAA</a></li>
    <li><a href="">BBBB BBBB BBBB</a></li>
    <li><a href="">CCCC CCCC CCCC</a></li>
  </ul>

  <h1>A Test Page</h1>
  <p>Some words</p>
</body>
</html>

boughtonp · 06-29-2020, 07:04 AM

There's better ways to solve this but my brain isn't working right now, so in the absence of any other replies here's a quick and dirty option...

Add "white-space: pre;" to "ul.breadcrumb" and change "float: left;" to "display: inline-block;" for "ul.breadcrumb li"

Then remove the newlines from the HTML:

Code:

<ul class="breadcrumb"><li><a href="">AAAA AAAA AAAA</a></li><li><a href="">BBBB BBBB BBBB</a></li><li><a href="">CCCC CCCC CCCC</a></li></ul>

or hide them with comments:

Code:

<ul class="breadcrumb"><!--
	--><li><a href="">AAAA AAAA AAAA</a></li><!--
	--><li><a href="">BBBB BBBB BBBB</a></li><!--
	--><li><a href="">CCCC CCCC CCCC</a></li><!--
--></ul>

ondoho · 06-29-2020, 12:47 PM

Your breadcrumb thingy consists of items that are equal members of the same list, but IMHO a breadcrumb thingy indicates nested items, i.e. BBBB is _inside_ AAAA, etc.:

Quote:

Originally Posted by Turbocapitalist

Code:

  <ul class="breadcrumb">
    <li><a href="">AAAA AAAA AAAA</a></li>
    ...
        <ul>
            <li><a href="">BBBB BBBB BBBB</a></li>
            ...
            <ul>
                <li><a href="">CCCC CCCC CCCC</a></li>
                ...
            </ul>
        ...
        </ul>
    ...
  </ul>

Be that as it may, one way to break the gordic knot is to change to a different layout altogether when the width goes under a certain value. You know, media queries, responsiveness...
I guess I'd choose a more vertically oriented display.

dugan · 06-29-2020, 03:27 PM

Most implementations these days would use Flexbox.

Turbocapitalist · 06-30-2020, 01:52 AM

Quote:

Originally Posted by dugan

Most implementations these days would use Flexbox.

Yes, that make sense. I guess my question then narrows to be about how to acheive the pointed triangles at the right of each item. My demo is using borders but that is where the trouble occurs when the wrapping happens.

Edit: getting closer with clip-path:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css" media="screen">
    ul.menu {
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; */
        align-items: left;
    }
    ul.menu li.item {
	list-style: none;
	border-style: solid;
	/* top right bottom left */
	border: none;
	padding: 0 0.5em 0 0.5em;
	height: 3ex;
    }
    ul.menu li.item:nth-child(1) { 
	background-color: #888; 
	content: " ";
  	clip-path: polygon(
    	  0% 0, /* left top */
    	  95% 0, /* right top */ 
    	  100% 50%, /* right */
    	  95% 100%, /* right bottom */
    	  0 100% /* left bottom */
  	  );
    }
    ul.menu li.item:nth-child(2) { 
	background-color: #aaa; 
  	clip-path: polygon(
    	  0% 0, /* left top */
    	  95% 0, /* right top */ 
    	  100% 50%, /* right */
    	  95% 100%, /* right bottom */
    	  0 100%, /* left bottom */
	  0.5em 50% /* left */
  	  );
    }
    ul.menu li.item:nth-child(3) { 
	background-color: #ccc; 
  	clip-path: polygon(
    	  0% 0, /* left top */
    	  95% 0, /* right top */ 
    	  100% 50%, /* right */
    	  95% 100%, /* right bottom */
    	  0 100%, /* left bottom */
	  0.5em 50% /* left */
  	  );
    }
    ul.menu li.item:nth-child(4) { 
	background-color: #eee; 
  	clip-path: polygon(
    	  0% 0, /* left top */
    	  95% 0, /* right top */ 
    	  100% 50%, /* right */
    	  95% 100%, /* right bottom */
    	  0 100%, /* left bottom */
	  0.5em 50% /* left */
  	  );
    }
    ul.menu li.item a {
	text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul class="menu">
        <li class="item"><a href="#">AAAAA AAAAA AAAAA</a></li>
        <li class="item"><a href="#">BBBBB BBBBB BBBBB</a></li>
        <li class="item"><a href="#">CCCCC CCCCC CCCCC</a></li>
        <li class="item"><a href="#">DDDDD DDDDD DDDDD</a></li>
    </ul>
  </nav>
  <h1>A Test Page</h1>
  <p>Some words</p>
</body>
</html>

SoftSprocket · 06-30-2020, 08:10 AM

This link doesn't give the tail portion but it gives triangles (and a remarkable array of shapes). There might be enough in it to help https://css-tricks.com/the-shapes-of-css/https://css-tricks.com/the-shapes-of-css/

Turbocapitalist · 06-30-2020, 09:02 AM

Thanks. That is a little more portable than clip-path, in regards to older browsers though much more difficult to work out. clip-path is basically just a list of points which demarcate a polygon for the canvas:

https://css-tricks.com/clipping-masking-css/

Apparently one can link to an SVG that way, but I'm now all set with a simpler polygon.