Menu icon Foundation

My Posts


My Comments

Brian Danchuk commented on Brian Danchuk's post almost 4 years

A simple work-a-round to get past the issue (in FIrefox and much better in Chrome) is to put a border on the focus state.

.vertical.menu li a{
color: $black;
background-color: $primary-color;
}
.vertical.menu * a:focus{
border-style: solid;
border-color: $primary-color;
border-width: 1px;
}

This works for a very simple styling of the menu.

Brian Danchuk commented on Brian Danchuk's post almost 4 years

Done.

Screen artifact in drilldown menu #8177

Thanks for your comments, Rafi.

Brian Danchuk commented on Brian Danchuk's post almost 4 years

Hi Rafi

I decided to move on and use a third-party slide-in off canvas menu, modifying the css to create an on-canvas drill-down. These artifacts are appearing in Chrome, Opera, & Firefox for the Mac (Yosemite). The slide effect doesn't work in Safari (8.05). ios9.2.1 iPhone works ok.

On the the PC, everything is fine using IE 7-Edge, under Windows 10 emulation.
However Chrome shows a right vertical artifact.

If you have a desktop Mac available you see the effect in the Foundation docs for the drilldown using Firefox (43.04) and Chrome (48). http://foundation.zurb.com/sites/docs/drilldown-menu.html

I don't see an issue in Chrome inspector, but I don't have the necessary javascript skills to say anything more. The page can be seen at dev.curvedesign.ca/greens (for the time being)

Source html:

            <div class="menu-container">
                <ul class="vertical menu" data-drilldown>
                  <li><a href="#">Your New Home</a></li>
                  <li><a href="#">Built on Tradition</a></li>
                  <li><a href="#">Design Guidelines</a></li>
                  <li><a href="#">Planning Your Home</a></li>
                  <li><a href="#">Available Lots</a>
                    <ul class="vertical menu">
                      <li><a href="#">Concept Plan</a></li>
                      <li><a href="#">Park Concept Plan</a></li>
                      <li><a href="#">Phase 1</a>
                        <ul class="vertical menu">
                          <li><a href="#">Phase 1 Stage 1</a></li>
                          <li><a href="#">Phase 1 Stage 1 Grading Plan</a></li>
                          <li><a href="#">Phase 1 Stage 2 Plan</a></li>
                          <li><a href="#">Phase 1 Stage 2A Grading Plan</a></li>
                          <li><a href="#">Phase 1 Stage 2B Grading Plan</a></li>
                        </ul>
                      </li>  
                      <li><a href="#">Phase Two</a>
                        <ul class="vertical menu"> 
                          <li><a href="#">Stage 1A Plan</a></li>
                          <li><a href="#">Stage 1A Grading Plan</a></li>
                          <li><a href="#">Stage 1B Plan</a></li>
                          <li><a href="#">Stage 1B Grading Plan</a></li>
                          <li><a href="#">Stage 2A Plan</a></li>
                          <li><a href="#">Stage 2A Grading Plan</a></li> 
                          <li><a href="#">Stage 2B Plan</a></li>
                          <li><a href="#">Stage 2B Grading Plan</a></li>   
                        </ul>        
                      </li>
                      <li><a href="#">Phase Three</a>
                        <ul class="vertical menu"> 
                          <li><a href="#">Phase 3 Plan</a></li> 
                          <li><a href="#">Phase 3 Grading Plan</a></li> 
                        </ul>  
                      </li>  
                      <li><a href="#">Phase Four</a>
                        <ul class="vertical menu"> 
                          <li><a href="#">Stage 1 Plan</a></li> 
                          <li><a href="#">Stage 1 Grading Plan</a></li> 
                          <li><a href="#">Stage 2 Plan</a></li> 
                          <li><a href="#">Stage 2 Grading Plan</a></li> 
                        </ul>     
                      </li> 
                      <li><a href="#">Phase Six</a>
                         <ul class="vertical menu"> 
                          <li><a href="#">Phase 6 Plan</a></li> 
                          <li><a href="#">Phase 6 Grading Plan</a></li>
                          <li><a href="ph6-park.html"> Neighbourhood Park</a></li> 
                         </ul> 
                      </li>  
                   </ul>
                  </li>       
                  <li><a href="showhomes.html">Current Show Homes</a></li>
                  <li><a href="builders.html">Find a Builder</a></li>
                  <li><a href="contact.html">Contact Us</a></li>  
                </ul>

            </div><!--//Menu -->

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on Brian Danchuk's post almost 4 years

A simple work-a-round to get past the issue (in FIrefox and much better in Chrome) is to put a border on the focus state.

.vertical.menu li a{
color: $black;
background-color: $primary-color;
}
.vertical.menu * a:focus{
border-style: solid;
border-color: $primary-color;
border-width: 1px;
}

This works for a very simple styling of the menu.

You commented on Brian Danchuk's post almost 4 years

Done.

Screen artifact in drilldown menu #8177

Thanks for your comments, Rafi.

You commented on Brian Danchuk's post almost 4 years

Hi Rafi

I decided to move on and use a third-party slide-in off canvas menu, modifying the css to create an on-canvas drill-down. These artifacts are appearing in Chrome, Opera, & Firefox for the Mac (Yosemite). The slide effect doesn't work in Safari (8.05). ios9.2.1 iPhone works ok.

On the the PC, everything is fine using IE 7-Edge, under Windows 10 emulation.
However Chrome shows a right vertical artifact.

If you have a desktop Mac available you see the effect in the Foundation docs for the drilldown using Firefox (43.04) and Chrome (48). http://foundation.zurb.com/sites/docs/drilldown-menu.html

I don't see an issue in Chrome inspector, but I don't have the necessary javascript skills to say anything more. The page can be seen at dev.curvedesign.ca/greens (for the time being)

Source html:

            <div class="menu-container">
                <ul class="vertical menu" data-drilldown>
                  <li><a href="#">Your New Home</a></li>
                  <li><a href="#">Built on Tradition</a></li>
                  <li><a href="#">Design Guidelines</a></li>
                  <li><a href="#">Planning Your Home</a></li>
                  <li><a href="#">Available Lots</a>
                    <ul class="vertical menu">
                      <li><a href="#">Concept Plan</a></li>
                      <li><a href="#">Park Concept Plan</a></li>
                      <li><a href="#">Phase 1</a>
                        <ul class="vertical menu">
                          <li><a href="#">Phase 1 Stage 1</a></li>
                          <li><a href="#">Phase 1 Stage 1 Grading Plan</a></li>
                          <li><a href="#">Phase 1 Stage 2 Plan</a></li>
                          <li><a href="#">Phase 1 Stage 2A Grading Plan</a></li>
                          <li><a href="#">Phase 1 Stage 2B Grading Plan</a></li>
                        </ul>
                      </li>  
                      <li><a href="#">Phase Two</a>
                        <ul class="vertical menu"> 
                          <li><a href="#">Stage 1A Plan</a></li>
                          <li><a href="#">Stage 1A Grading Plan</a></li>
                          <li><a href="#">Stage 1B Plan</a></li>
                          <li><a href="#">Stage 1B Grading Plan</a></li>
                          <li><a href="#">Stage 2A Plan</a></li>
                          <li><a href="#">Stage 2A Grading Plan</a></li> 
                          <li><a href="#">Stage 2B Plan</a></li>
                          <li><a href="#">Stage 2B Grading Plan</a></li>   
                        </ul>        
                      </li>
                      <li><a href="#">Phase Three</a>
                        <ul class="vertical menu"> 
                          <li><a href="#">Phase 3 Plan</a></li> 
                          <li><a href="#">Phase 3 Grading Plan</a></li> 
                        </ul>  
                      </li>  
                      <li><a href="#">Phase Four</a>
                        <ul class="vertical menu"> 
                          <li><a href="#">Stage 1 Plan</a></li> 
                          <li><a href="#">Stage 1 Grading Plan</a></li> 
                          <li><a href="#">Stage 2 Plan</a></li> 
                          <li><a href="#">Stage 2 Grading Plan</a></li> 
                        </ul>     
                      </li> 
                      <li><a href="#">Phase Six</a>
                         <ul class="vertical menu"> 
                          <li><a href="#">Phase 6 Plan</a></li> 
                          <li><a href="#">Phase 6 Grading Plan</a></li>
                          <li><a href="ph6-park.html"> Neighbourhood Park</a></li> 
                         </ul> 
                      </li>  
                   </ul>
                  </li>       
                  <li><a href="showhomes.html">Current Show Homes</a></li>
                  <li><a href="builders.html">Find a Builder</a></li>
                  <li><a href="contact.html">Contact Us</a></li>  
                </ul>

            </div><!--//Menu -->

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content