Nav bar assistance please

IBazz · December 28, 2018, 6:14pm

Hi,
Ive been away from CSS for a few years and it seems to have moved on greatly
But I’m now stuck.

I am building a ‘navbar’ type function to my page which will in effect be a filtering device to ensure only those items selected will display (though they’ll all display by default on page load).

So, on initial page load, they will all display and when something is selected, the displayed items will be restricted to the section selected.

Designed with a checkbox followed by the ‘label’, I want a checkmark to display when it has been clicked on.

I can’t seem to get the ::after (green checkmark) to display on the same line (and after), the checkbox and the label.

Questions:

How best should I make the ::after checkmark display on the same line as the label and checkbox?

which leads to me to wonder;

If I make the checkmark display instead of the checkbox (so I make it a ::before element), so that when the page loads, they are all green by default; how should the css look, to make sure that when an item is clicked on (eg kettles), its checkmark stays green (or is re-assigned green) whilst the others all turn grey?

When ‘Kettles’ is selected, I want to show clearly which selection they user has made by showing a green checkmark beside Kettles but changing all others, not selected to grey.

There may be more than one item selected in which case all selected items should be green and all others, grey.

Any assistance would be greatly appreciated.

html:

 <div class="filter_div">
    <h1>kitchen equipment</h1>
  
    <div class="half">


      <div class="tab">
        <!-- <input id="tab-one" type="checkbox" name="tabs"> -->
        <!-- <label for="tab-one">Product Category</label> -->
        <div class="tab-content">  

          <p>
            <input type="checkbox" id="product_category:kitchen equipment" checked=checked />
            <label for="product_category:kitchen equipment">kitchen equipment</label>
          </p>
        </div>
      </div>
      <div class="tab">
        <input id="tab-two" type="checkbox" name="tabs">
        <label for="tab-two">Sub Category</label>
        <div class="tab-content">  
          <p>
            <input type="checkbox" id="sub_category:kettles" />
            <label for="sub_category:kettles">kettles</label>
          </p> 
          <p>
            <input type="checkbox" id="sub_category:pedal bins" />
            <label for="sub_category:pedal bins">pedal bins</label>
          </p> 
          <p>
            <input type="checkbox" id="sub_category:tea makers" />
            <label for="sub_category:tea makers">tea makers</label>
          </p> 
          <p>
            <input type="checkbox" id="sub_category:utensils" />
            <label for="sub_category:utensils">utensils</label>
          </p> 
        </div>
      </div>
    </div>
  </div>

css:

<style>
.filter_div{
width: 300px;
text-transform: capitalize;
}
.half {
  float: left;
  width: 100%;
  padding: 0;
}
/* Acordeon styles */
.tab {
  position: relative;
  margin-bottom: 0;
  width: 100%;
  color: #fff;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab label {
  position: relative;
  display: block;
  padding: 0; /* 0 0 1em;*/
  background: #717074; /*#16a085;*/
  font-weight: bold;
  line-height: 3em;
  cursor: pointer;
}
.blue label {
  background: #2980b9;
}
.tab-content {
  max-height: 0;
  width: 100%;
  overflow: hidden;
  background: #dad8da; /*#1abc9c;*/
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content label{
background-color: #fff;
margin:0;
padding:0;
border:0;
color: #717074;
}
.tab-content p {
  margin: 0; /*1em;*/
border: 1px solid #000;
}
/* :checked */
.tab input:checked ~ .tab-content {
  max-height: 100vh;
}


/* Icon */
.tab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.tab input[type=checkbox] + label::after {
  content: "+";
}
.tab input[type=radio] + label::after {
  content: "\25BC";
}
.tab input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
.tab input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}


/*  my mods */
.tab-content{
background: inherit;
}
.tab-content p{
clear:left;
display:block;
}
.tab-content input{
position: initial;
opacity: 100;
z-index:initial;
margin: 1em 0 1em 1em;
}
.tab-content label{
display: inline; /*initial;*/
line-height: 1em;
}
.tab-content input[type=checkbox] + label::after{
  content: '+';
  transform: rotate(45deg);
}

.tab-content input[type=checkbox]:checked + label::after {
content: "\2713"; 
transform: none;
color: green;
}
/* end of my mods*/
</style>

Erik_J · December 28, 2018, 10:46pm

Hi, one fix could be to:

– Refer horizontal position 100% from the left side to get the correct distance.
(It’s usually better to refer position to top and left edges of its parent in flow.)

– Level with adjacents in line: Remove the erroneous line-height declaration.

Try:

/* Icon */
.tab label::after {
	position: absolute;
	/* right: 0; */
	top: 0;
	left: 100%; /* instead of right:0 */
	display: block;
	width: 3em;
	height: 3em;
	/* line-height: 3; */ /* pushes the icon down */
	text-align: center;
	-webkit-transition: all .35s;
	-o-transition: all .35s;
	transition: all .35s;
}

IBazz · December 29, 2018, 3:04pm

Thank you Erik_J

I suspetced something was unnecessary about the line-height especially given that, I think, it should have had em or other units after the size.

All working now.

Bazz

Erik_J · December 29, 2018, 3:28pm

I think your icon code is unnecessary complex.

Do you want to try an alternative that doesn’t use positioning?

IBazz · December 29, 2018, 3:39pm

Yes please, I’m all ears. Though I think I am almost doing it without positioning. Maybe I am confusing you with some of the redundant css being there. Only the first three accordion styles use positioning. I have set “display:none;” for all the others, I think.’ The “.tab_content input” css is where I reset positioning to initial to override the first three.

here is the current css

<style>
#filtering_div{
  width: 300px; /* !important;*/
  text-transform: capitalize;
  margin:0 auto !important;
  zheight: 600px;
}
#filtering_div h1{
  font-size: 1em;
}
#shopping_index{
clear:left;
}
/* Accordion styles */
.tab {
  position: relative;
  margin-bottom: 0;
  width: 100%;
  color: #fff;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab label {
  position: relative;
  display: block;
  padding: 0; 
  background: #717074; 
  font-weight: bold;
  line-height: 1.5em;
  cursor: pointer;
}
.blue label {
  background: #2980b9;
}
.tab-content {
  max-height: 0;
  width: 100%;
  overflow: hidden;
  font-size: 0.7em;
  background: inherit; 
  -webkit-transition: max-height .75s;
  -o-transition: max-height .75s;
  transition: max-height .75s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content label{
  background-color: #fff;
  margin:0;
  padding:0;
  border:0;
  color: #717074;
}
.tab-content p {
  clear:left;
  display:block;
  text-align:left;
  margin: 0;
  border: 1px solid #1b1b1b;
  border-left: 0;
  border-right:0;
  border-top:0;
}
/* :checked */
.tab input:checked ~ .tab-content {
  max-height: 100vh;
}


/* Icon */
.tab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  -webkit-transition: all 1.35s;
  -o-transition: all 1.35s;
  transition: all 1.35s;
}

.tab input[type=checkbox] + label::after {
  content: "+";
  display:none;
}
.tab input[type=radio] + label::after {
  content: "\25BC";
}
.tab input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
.tab input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}


/* modifications to what's above */
.lowercase{
text-transform:lowercase;
}
.tab-content input{
  position: initial;
  display:none;
  opacity: 0;
  z-index:initial;
  margin: 1em;
}
.tab-content label{
  display: block;
  line-height: 1.5em;
}
.tab-content input[type=checkbox] + label::after{
  display:none;
  content:'';
}

.tab-content input[type=checkbox] + label::before{
  content: '\2713';
  color: #dad8da;
  margin-right: 10px;
  -webkit-transition: all .75s;
  -o-transition: all .75s;
  transition: all .75s;
}

.tab-content input[type=checkbox]:checked + label::before {
  content: "\2713"; 
  transform: none;
  color: green; 
  font-weight: 700;
}
/* end of mods*/
</style>

Erik_J · December 29, 2018, 4:33pm

Sorry for the delay.

Try this and compare the display:


/* Icon */
.tab label::after {
  /*
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  */
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: all 1.35s;
  -o-transition: all 1.35s;
  transition: all 1.35s;
}

I’m soon AFK again, maybe back later.

IBazz · December 29, 2018, 4:38pm

AFK?? duh. got it. Away from keyboard.

Sorry that I may have confused you. That part of the css is not used and I will remove it because its output is set to display:none, later in the css. I’m only using the ‘before’ css now.

bazz

Erik_J · December 29, 2018, 4:48pm

OK, I’ve read the whole code now.

You already skipped that, good!

Used your old code, didn’t notice the changes in your post.
It works the same with after pseudo too.

IBazz · December 29, 2018, 5:02pm

Thank you.

One last question on this part… If I click on kettles (for example), is there a CSS way to change the colour of the checkmarks for the other items in that section of kitchen equipment? So with a grey checkmark by default (on page load), to the left of each of kettles, bins, tea-makers, utensils - I want to click kettles and for its checkmark to become green (it does that) but for all the others to become #ffffff; Is that possible in css or would I need to do it with JS?

I want to avoid confusion for users by ensuring they know which sections they have selected.

system · March 31, 2019, 12:03am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.