Home > Net >  How to make whole <li> clickable as a link
How to make whole <li> clickable as a link

Time：07-05

I have navigation menu that contains links, what I want to achieve is to make the whole li element clickable as a link. so how to achieve that please? I'm using bootstrap 3.2 library. below is the HTML and CSS code. User wants to able to click on the Link from anywhere inside the li html element

.navbar {
     position: relative; 
   min-height: 40px !important; 
     margin-bottom: 20px; 
    border: none !important; 
}


#navbarSupportedContent .nav-item {
    text-transform: uppercase;
    text-align: center;
    font-weight: 800;
    border-right: 1px solid #01154D;
    padding: 10px 24px;
}

#navbarSupportedContent .nav-item:hover {
    background-color: #DBDDFD;
    color: #000 !important;
}
<div role="navigation">
               <div >
                  <div id="undefined-sticky-wrapper"  style="height: 42px;"><nav >
                     <div  id="navbarSupportedContent">
                        <ul  style="float:inherit;">
                                          <li >
                                             <a  href="/webcenter/portal/dummy/pages_en">
                                                <span id="submenu1">Home</span>
                                             </a>
                                          </li>
                                          <li >
                                             <a  href="/webcenter/portal/dummy/pages_employeetools">
                                                <span id="submenu1">Employee Tools</span>
                                             </a>
                                          </li>
                                          <li >
                                             <div >
                                                <a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true"  data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
                                                <div aria-labelledby="dropdownMenuLink" >
                                                      <a  href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
                                                      <a  href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
                                                      <a  href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
                                                      <a  href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
                                                </div>
                                             </div>
                                          </li>
                                          <li >
                                             <a  href="/webcenter/portal/dummy/pages_documents">
                                                <span id="submenu1">Documents</span>
                                             </a>
                                          </li>
                           <li ><a data-afr-tlen="7" id="T:arabic2"  style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
                                 <i aria-hidden="true" ></i></a>
                           </li>
                           <li  style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" ><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal"  style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
                           </li>
                        </ul><span id="T:search2" >
                           <div  id="searchxs"><div id="T:searchbox2"  aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate"  onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
                           </div></span>
                     </div>
                  </nav></div>
               </div>
</div>

CodePudding user response：

Remove li padding and add width 100% and padding to a tag

li.nav-item > a, li.nav-item > .dropdown show a{
    display: block;
    width: 100%;
}
 .navbar {
     position: relative; 
   min-height: 40px !important; 
     margin-bottom: 20px; 
    border: none !important; 
}
li.nav-item a{ padding: 10px 0px;}

#navbarSupportedContent .nav-item {
    text-transform: uppercase;
    text-align: center;
    font-weight: 800;
    border-right: 1px solid #01154D;
    padding: 0px 24px;
}

#navbarSupportedContent .nav-item:hover {
    background-color: #DBDDFD;
    color: #000 !important;
}
<div role="navigation">
<div >
<div id="undefined-sticky-wrapper"  style="height: 42px;"><nav >
<div  id="navbarSupportedContent">
<ul  style="float:inherit;">
<li >
   <a  href="/webcenter/portal/dummy/pages_en">
      <span id="submenu1">Home</span>
   </a>
</li>
<li >
   <a  href="/webcenter/portal/dummy/pages_employeetools">
      <span id="submenu1">Employee Tools</span>
   </a>
</li>
<li >
   <div >
      <a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true"  data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
      <div aria-labelledby="dropdownMenuLink" >
            <a  href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
            <a  href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
            <a  href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
            <a  href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
      </div>
   </div>
</li>
<li >
   <a  href="/webcenter/portal/dummy/pages_documents">
      <span id="submenu1">Documents</span>
   </a>
</li>
<li ><a data-afr-tlen="7" id="T:arabic2"  style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
<i aria-hidden="true" ></i></a>
</li>
<li  style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" ><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal"  style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
</li>
</ul><span id="T:search2" >
<div  id="searchxs"><div id="T:searchbox2"  aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate"  onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
</div></span>
</div>
</nav></div>
</div>
</div>

CodePudding user response：

Do not render the <li> big, but the <a>. The anchor element already has all the bindings necessary to provide an accessible and very usable link. Rendering it bigger improves usability.

.navbar {
  position: relative;
  min-height: 40px !important;
  margin-bottom: 20px;
  border: none !important;
}

#navbarSupportedContent .nav-item {
  text-transform: uppercase;
  text-align: center;
  font-weight: 800;
}

#navbarSupportedContent .nav-link {
  display: block;
  border-right: 1px solid #01154D;
  padding: 10px 24px;
}

#navbarSupportedContent .nav-link:hover {
  background-color: #DBDDFD;
  color: #000 !important;
}
<div role="navigation">
  <div >
    <div id="undefined-sticky-wrapper"  style="height: 42px;">
      <nav >
        <div  id="navbarSupportedContent">
          <ul  style="float:inherit;">
            <li >
              <a  href="/webcenter/portal/dummy/pages_en">
                <span id="submenu1">Home</span>
              </a>
            </li>
            <li >
              <a  href="/webcenter/portal/dummy/pages_employeetools">
                <span id="submenu1">Employee Tools</span>
              </a>
            </li>
            <li >
              <div >
                <a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true"  data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
                <div aria-labelledby="dropdownMenuLink" >
                  <a  href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
                  <a  href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
                  <a  href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
                  <a  href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
                </div>
              </div>
            </li>
            <li >
              <a  href="/webcenter/portal/dummy/pages_documents">
                <span id="submenu1">Documents</span>
              </a>
            </li>
            <li ><a data-afr-tlen="7" id="T:arabic2"  style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
                                 <i aria-hidden="true" ></i></a>
            </li>
            <li  style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" ><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal"  style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
            </li>
          </ul><span id="T:search2" >
                           <div  id="searchxs"><div id="T:searchbox2"  aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate"  onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
                           </div></span>
        </div>
      </nav>
    </div>
  </div>
</div>

CodePudding user response：

So a simple CSS only solution would be;

  1. Remove the padding from li element.
  2. Make the a tag a block and give it 100% width

.navbar {
  position: relative; 
  min-height: 40px !important; 
  margin-bottom: 20px; 
 border: none !important; 
}


#navbarSupportedContent .nav-item {
 text-transform: uppercase;
 text-align: center;
 font-weight: 800;
 border-right: 1px solid #01154D;
 padding: 0;
}

#navbarSupportedContent .nav-item:hover {
 background-color: #DBDDFD;
 color: #000 !important;
}

#navbarSupportedContent .nav-item a {
 display: block;
 width: 100%;
 padding: 10px 24px; // removed from list and added here for same visual effect
}
<div role="navigation">
               <div >
                  <div id="undefined-sticky-wrapper"  style="height: 42px;"><nav >
                     <div  id="navbarSupportedContent">
                        <ul  style="float:inherit;">
                                          <li >
                                             <a  href="/webcenter/portal/dummy/pages_en">
                                                <span id="submenu1">Home</span>
                                             </a>
                                          </li>
                                          <li >
                                             <a  href="/webcenter/portal/dummy/pages_employeetools">
                                                <span id="submenu1">Employee Tools</span>
                                             </a>
                                          </li>
                                          <li >
                                             <div >
                                                <a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true"  data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
                                                <div aria-labelledby="dropdownMenuLink" >
                                                      <a  href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
                                                      <a  href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
                                                      <a  href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
                                                      <a  href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
                                                </div>
                                             </div>
                                          </li>
                                          <li >
                                             <a  href="/webcenter/portal/dummy/pages_documents">
                                                <span id="submenu1">Documents</span>
                                             </a>
                                          </li>
                           <li ><a data-afr-tlen="7" id="T:arabic2"  style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
                                 <i aria-hidden="true" ></i></a>
                           </li>
                           <li  style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" ><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal"  style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
                           </li>
                        </ul><span id="T:search2" >
                           <div  id="searchxs"><div id="T:searchbox2"  aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate"  onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
                           </div></span>
                     </div>
                  </nav></div>
               </div>
</div>

CodePudding user response：

Simple Solution, Just throw list (li) between the anchor tags (a)

<ul  style="float:inherit;">
          <a  href="/webcenter/portal/dummy/pages_en">                              
          <li >                                        
               <span id="submenu1">Home</span>                                      
          </li>
         </a>
          <a  href="/webcenter/portal/dummy/pages_employeetools">
             <li >
                <span id="submenu1">Employee Tools</span>
              </li>
          </a>
         
       </ul>

Page link：https//www.codepudding.com/net/463958.html

Prev:color specific placeholder using css
Next:Keep placeholder partially while typing in input type text
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding