How the use the results of a CSS CALC() to update the left property value

Question

I am trying to use, and then change, the left property value of my left-hand sidebar as though it were a memory variable unsuccessfully. My basic algorithm is

left = (left * (-1) - 250)
Initial value of left is 0.
step #1: If left (value) is 0; then left should become -250.
step #2: If left (new value) is -250; left should then become 0.
step #3: go to step #1

Try this in a spreadsheet where left is the value of the preceding row. Your result rows should look like this:

-250
0
-250

I am effectively trying to toggle the left value from 0 to -250 then back to 0. So that my left hand sidebar is either "on" or "off" canvas as determined by the left: value.

I have tried many variations of calc, including

    @leftr: 0; is set at the beginning of of my CSS sheet.
    @negtv: -1; also set at the beginning of my CSS sheet.

....
@leftr: -webkit-calc(~"((@leftr * @negtv) - 250)"); /* slide-in/out 0 or -250 */
left: @leftr;

I hope this is clearer than mud and that you guys can help me? Thanks in advance

Maybe, [this](http://stackoverflow.com/questions/17458582/nth-childeven-odd-selector-with-class) would help — ankhzet, Aug 22 '15 at 05:27
What meaning of it? Do you trying to show/hide sidebar on click? — ankhzet, Aug 22 '15 at 05:40
Under which circumstances should change occur? JavaScript event? If so, just change the value in the JavaScript routine. — Mr Lister, Aug 22 '15 at 05:59
I mean, it almost sounds like you want to change the value when the page reflows. — Mr Lister, Aug 22 '15 at 06:01
The change should occur on a click of navigation bar and so sliding-in or sliding-out of my vertical left-hand menu using pure CSS — Buddhabaker, Aug 22 '15 at 06:42

score 0 · Answer 1 · answered Aug 22 '15 at 07:57

That is not possible with pure CSS, AFAIK.

Consider to use JavaScript for that. Here's example:

Script

$('.sidebar-toggle').click(function() {
    var sidebar = $('.items');
    sidebar.css('margin-left', 0);
    if (!sidebar.hasClass('hidden'))
        sidebar.addClass('hidden'); 
    else
        sidebar.removeClass('hidden');
});

$('.sidebar-slide').click(function() {
    var sidebar = $('.items');
    var hidden = sidebar.hasClass('hidden');
    if (hidden) {
        sidebar.css('margin-left', -sidebar.width()*2);
        sidebar.removeClass('hidden');
        sidebar.animate({'margin-left': 0});
    } else  {
        sidebar.css('margin-left', 0);
        sidebar.removeClass('hidden');
        sidebar.animate({'margin-left': -sidebar.width()*2}, function() {
            sidebar.addClass('hidden');
        });
    }

});

HTML/CSS

<style>
.nav {
}
.nav a {
    cursor: pointer;
    color: navy;
    font-weight: bold;
}
.items {
    position: absolute;
    width: 100px;
    border: 1px solid black;
}

.items.hidden {
    display: none;
}
</style>
<div class="nav">
    Sidebar: 
      <a class="sidebar-toggle">Toggle</a>
    | <a class="sidebar-slide">Slide</a>
</div>
<br />
<div class="items">
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
    <div class="item">item</div>
</div>

You can try it at jsFiddle.

Thanks, ankhzet, but your solution uses js. I didn't want a js solution, I wanted a pure CSS one. Which is why I asked the community for help in solving my algorithm. The ability to "toggle" the setting or value of left: would make the whole process so much simpler. Plus your js solution would be easier too! — Buddhabaker, Aug 22 '15 at 10:59
@Buddhabaker, actually, I provided __two__ solutions: one for simple toggling, one for __sliding__. And also, as I already told - that is __impossible__ with pure CSS. CSS doesn't react to mouseclicks. Just doesn't. CSS evaluates only once per page refresh. All after that single evaluation - just appliance of constraints, evaluated at that single occasion. CSS does handle selectors, like `:hover` or `:blur`, but no `:click` or smth. like that. — ankhzet, Aug 22 '15 at 11:30
@Buddhabaker, yours mistake is in treating CSS as some interpreted highlevel language. That's wrong. **C**ascading **S**tyle **S**heets. Not bigger, not less. You think about that `@leftr` like it is a `memory-slot-variable`, which value you can manipulate within some program-run-loop, but that `@leftr` is just a placeholder for substitution somewhere further in styles sheet. Just a placeholder, which's value is assigned only once. — ankhzet, Aug 22 '15 at 11:39

score 0 · Answer 2 · answered Aug 22 '15 at 15:09

If you want a sidebar that shows up when the user clicks something, without JavaScript, you can use the hidden checkbox trick.

.sidebar {
  padding:8px;
  position:absolute;
  left:-250px; top:0;
  width:234px; height:100%;
  height:calc(100% - 16px); /* sorry */
  background:#CCF;
  transition:left 1s;
}

#showsidebar {display:none}

label[for='showsidebar'] {    /* make it look like a link */
  color:blue;
  text-decoration:underline;
  cursor:pointer;
}

#showsidebar:checked ~ .sidebar {
  left:0;
}

<input type="checkbox" id="showsidebar">
<label for="showsidebar">show sidebar</label>

<section class="sidebar">
  <label for="showsidebar">hide sidebar</label>
  <h1>The sidebar!</h1>
  <p>(contents of sidebar)</p>
</section>

<h1>The main site</h1>
<p>Blabla. Something Latin.</p>

Mr Lister, thank you, not quite the answer I was seeking but a lovely solution to what I was trying to develop. — Buddhabaker, Aug 23 '15 at 15:22

How the use the results of a CSS CALC() to update the left property value

2 Answers2