CODEWITHSUNDEEP
htmlcss
pcs
pcs

Reputation: 1854

How to set right sidebar for menu list in css

all

I have been created navigation menu bar,

Here is my JSFIDDLE

I need to add right side bar for each list like THIS

I just added vertical line for each list,

    <a href="" style="text-decoration:none;"><span style="color: #ffffff;
 padding-right:20px; font-size: 17px; font-weight: inherit; line-height:
 inherit; text-decoration: inherit;" class=""> Share</span></a> |
    <a href="" style="text-decoration:none;"><span style="color: #ffffff;
 padding-right:20px; font-size: 17px; font-weight: inherit; line-height:
 inherit; text-decoration: inherit;" class=""> Join</span></a> |
   <a href="" style="text-decoration:none;"><span style="color: #ffffff;
 padding-right:20px; font-size: 17px; font-weight: inherit; line-height:
 inherit; text-decoration: inherit;" class=""> See Safety Tips</span></a> |
   <a href="" style="text-decoration:none;"><span style="color: #ffffff; 
padding-right:20px; font-size: 17px; font-weight: inherit; line-height:
 inherit; text-decoration: inherit;" class=""> Settings</span></a>

May i know, any other way to increase the height and set color for that right sidebar.

Any help would be highly appreciated.,

Thanks,

Note: I need to do this, without any changes in my html.

Upvotes: 1

Views: 2083

Answers (4)

Philip Dernovoy
Philip Dernovoy

Reputation: 1179

Using pseudo elements is a good idea.

/* my version */
.nav {
  background: #007EA8;
  padding: 20px;
  font: normal 16px/20px arial;
  margin: 0 0 15px;
  list-style: none;
}
.nav-item {
  display: inline-block;
  margin-right: 40px;
}
.nav-item:not(:first-child)::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 30px;
  background: #fff;
  margin: -5px 0 0 -21px;
}
.nav-link {
  color: #fff;
  text-decoration: none;
}

/* your version */
.menu-item {
  text-decoration: none;
}
.menu-item:not(:first-child)::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 30px;
  background: #fff;
  margin: -5px 0 0 -11px;
}
.menu-item span {
  color: #fff;
  padding-right: 20px;
  font-size: 17px;
}
<!-- my version -->
<ul class="nav">
  <li class="nav-item"><a href="#" class="nav-link">Share</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Join</a></li>
  <li class="nav-item"><a href="#" class="nav-link">See Safety Tips</a></li>
  <li class="nav-item"><a href="#" class="nav-link">Settings</a></li>
</ul>

<!-- your version -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 13px;">
  <tr id="layout-row88" class="layout layout-row widget _widget_text style88" style="margin: 0; padding: 0; background-color: #007EA8;">
    <td id="layout-row-padding88" valign="top" style="padding: 42px 0px;">
      <table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 13px;">
        <tr>
          <td id="text_div72" class="td_text td_block" valign="top" align="left" width="285" style="color: inherit; font-size: inherit; font-weight: inherit; line-height: 1; text-decoration: inherit; font-family: Arial;">
            <a href="" class="menu-item"><span>Share</span></a>
            <a href="" class="menu-item"><span>Join</span></a>
            <a href="" class="menu-item"><span>See Safety Tips</span></a>
            <a href="" class="menu-item"><span>Settings</span></a>

            <div style="margin: 0; outline: none; padding: 0; text-align: right;">
              <a href="%WEBCOPY%" class="" target="_blank" style="margin: 0; outline: none; padding: 0; color: #333333;"></a>
              <br>
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

I modified your code too

Upvotes: 1

Mitul
Mitul

Reputation: 3427

Here is the code how to show menu i have change your html to UL li based.

DEMO Link http://jsfiddle.net/patelmit69/5nu67uwv/1/ HTML

<ul>
    <li> <a href=''>Share</a></li>
    <li> <a href=''>Join</a></li>
    <li> <a href=''>See Safety Tips</a></li>
    <li> <a href=''>Settings</a></li>

CSS 

ul {
    list-style:none;
    padding:10px;
    background:blue;
}
ul li {
    display:inline-block;
}
ul li a {
    color:#fff;
    text-decoration:none;
    display:block;
    padding:3px 10px;
    border-left:1px solid #fff;
}
ul li:first-child a {
    border-left:0px;
}

Upvotes: 0

Akshay
Akshay

Reputation: 14348

You can use pseudo elements to do it 

a span:after{
    content:"|";
    font-size:30px;
    color:white;
    margin-left:10px;
}
a:nth-child(4) span:after{
    content:"";
}
              <table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 13px;">
                                            <tr id="layout-row88" class="layout layout-row widget _widget_text style88" style="margin: 0; padding: 0; background-color: #007EA8;">
                                              <td id="layout-row-padding88" valign="top" style="padding: 42px 0px;">
                                                <table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 13px;">
                                                  <tr>
                                                    <td id="text_div72" class="td_text td_block" valign="top" align="left" width="285" style="color: inherit; font-size: inherit; font-weight: inherit; line-height: 1; text-decoration: inherit; font-family: Arial;">
                                                      <a href="" style="text-decoration:none;"><span style="color: #ffffff; padding-right:20px; font-size: 17px; font-weight: inherit; line-height: inherit; text-decoration: inherit;" class=""> Share</span></a> 
                                                       <a href="" style="text-decoration:none;"><span style="color: #ffffff; padding-right:20px; font-size: 17px; font-weight: inherit; line-height: inherit; text-decoration: inherit;" class=""> Join</span></a> 
													    <a href="" style="text-decoration:none;"><span style="color: #ffffff; padding-right:20px; font-size: 17px; font-weight: inherit; line-height: inherit; text-decoration: inherit;" class=""> See Safety Tips</span></a> 
													    <a href="" style="text-decoration:none;"><span style="color: #ffffff; padding-right:20px; font-size: 17px; font-weight: inherit; line-height: inherit; text-decoration: inherit;" class=""> Settings</span></a>
													  
													  <div style="margin: 0; outline: none; padding: 0; text-align: right;">
													  <a href="%WEBCOPY%" class="" target="_blank" style="margin: 0; outline: none; padding: 0; color: #333333;">
													  </a><br></div>
                                                    </td>
                                                  </tr>
                                                </table>
                                              </td>
                                            </tr>
                                          </table>

Upvotes: 0

stanze
stanze

Reputation: 2480

you can wrap your sidebar in a seperate inline element like

<span class="sideBar">|</span>

and style that class accordingly.

Upvotes: 0

Related Questions