1,105,546 Community Members

Tree menu

Member Avatar
hajjo
Junior Poster
104 posts since Mar 2008
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 
<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

Member Avatar
Atli
Practically a Master Poster
691 posts since May 2007
Reputation Points: 182 [?]
Q&As Helped to Solve: 107 [?]
Skill Endorsements: 16 [?]
 
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.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article