Tree menu

<div id="menu" class="menu">
  <a href="/" title="Nornix TreeMenu">start</a>
  <ul>
    <li>
      <a href="/info" title="Information">info</a>
      <ul>
        <li>
          <a href="/info/features">features</a>
        </li>
        <li>
          <a href="/info/layers">layers</a>
        </li>
        <li>
          <a href="/info/compatibility">compatibility</a>
        </li>
        <li>
          <a href="/info/usage">usage</a>
          <ul>
            <li>
              <a title="HTML structure">HTML</a>
            </li>
            <li>
              <a href="/info/usage/css" title="CSS classes">CSS</a>
            </li>
            <li>
              <a href="/info/usage/js" title="JS behavior">JS</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="/license">license</a>
    </li>
    <li>
      <a href="/contact">contact</a>
    </li>
  </ul>
</div>

I wan tto do sthg similar, but without those squares and circles..
I want it to be by div and span maybe? can someone give me a code of tree menu without those squars/cirecles

2

Contributors

1

Reply

10 Hours

Discussion Span

3 Years Ago

Last Updated

2

Views

hajjo

Junior Poster

103 posts since Mar 2008

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

3 Years Ago

0

Hey.

You just need to change the list-style for the <ul> elements. Setting it to list-style: none will hide the bullets.

Like:

<!DOCTYPE html>
<head>
    <title>List-Style example</title>
    <meta http-equiv="content-type" content="text/html; charset=utf8">
    <style type="text/css">
        #menu ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="menu" class="menu">
      <a href="/" title="Nornix TreeMenu">start</a>
      <ul>
        <li>
          <a href="/info" title="Information">info</a>
          <ul>
            <li>
              <a href="/info/features">features</a>
            </li>
            <li>
              <a href="/info/layers">layers</a>
            </li>
            <li>
              <a href="/info/compatibility">compatibility</a>
            </li>
            <li>
              <a href="/info/usage">usage</a>
              <ul>
                <li>
                  <a title="HTML structure">HTML</a>
                </li>
                <li>
                  <a href="/info/usage/css" title="CSS classes">CSS</a>
                </li>
                <li>
                  <a href="/info/usage/js" title="JS behavior">JS</a>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <a href="/license">license</a>
        </li>
        <li>
          <a href="/contact">contact</a>
        </li>
      </ul>
    </div>
</body>
</html>

I assume, by the fact that you have a class set in the <div>, that you have some CSS somewhere. You would only have to add that one line to your existing CSS.

Atli

Posting Pro

585 posts since May 2007

Reputation Points: 119

Solved Threads: 80

Skill Endorsements: 6

Tree menu

This article has been dead for over three months: Start a new discussion instead