Simple horizontal nav in LESS

HTML & CSS
1

Hi all

I have a page here to illustrate - www.ttmt.org.uk/list.html

It’s the simplest of <li> lists used to create a horizontal menu.


  nav li{
    display:inline;
  }
  nav li a{
    float:left;
    display:block;
  }

I do this all the time to create menus with added CSS for style the <a> tag.

I have recently started using LESS so I’m still trying to work out what I can and can’t do.

Is there a way to put this code in a function in LESS, something like:


  .horiNav(){

    li{
      display:inline;
    }

    li a{
      float:left;
      diaplay:block;
    }

  }

then call it in the css like


  nav{
    .horiNav();
  }
2

It seems to work., Sorry I should have tried it before posting

3

Regarding the CSS itself, that’s not a great way to do it. Floating the links isn’t much use if the list items are already inline. I suggest you just float the list items and set the links to display: block.

4

so like


  .horiNav(){
    
    li{
      float:left;
    }
    
    li a{
      float:left;
      diaplay:block;
    }
  
  }
5

No, there’s no need to float the anchor. Just float the list item. :slight_smile:

6

I do tend to float my anchors and set my li’s to display: inline (only for an obscure IE bug, otherwise I’d set no styles on the li at all) but ralph’s way can be simpler (less css to write). But here’s another way you could write it


.horiNav() {

    &>li {
      display: inline;

            &>a{
                float:left;
            }
    }
}

(this is what I use if I have nested menus like a dropdown, where the sub li’s and a’s should not be inheriting these styles)

or


.horiNav() {

    li {
      display: inline;
    }

    a {
        float:left;
    }
}

for any simple menus who have no layers. So here I want the resulting CSS to simply be .horiNav a instead of .horiNav li a, which is redundantly redundant.

I actually hate writing LESS (and really hate debugging it), but if I have to, I might as well be lazy about it.