Member Avatar for hajjo 
<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
  • 91 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by Atli
Member Avatar for Atli

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.