Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Archived] Drop-down menu problem



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Anzobuse

avatar
Newbie
Newbie
  • Description:
Helllo.

I have the follow code which supposed to be a drop-down menu; however, I'm having issues getting the CSS correctly, I'm still a biginner in CSS so I can't seem to be able to figure out what's wrong on my own, I'd appreciate the help Very Happy The problem is the the Tools Container (Supposed to be an Image) isn't showing, only the text "Click to view tools" is showing, while I want the Image to show as well, once someone click on the Image, I want the sub-menus to drop down.

Code:
<script type="text/javascript">
  $(document).ready(function(){
     var tools = $('#tools'), toolsContainer = $('#toolsContainer');
     toolsContainer.on('click',function(){
        tools[0].style.display = (tools[0].style.display === "none") ? "block" : "none";
     });
  });
</script><style>

#toolsContainer ul{
Display: block;
position: relative;
top:5px;
overflow: visible;
background-image: url("http://i.imgur.com/uX7Kknx.png");
background-repeat: no-repeat;
}
#tools li{
padding-left:10px;
line-height:30px;
list-style-type: none;
text-decoration: none;
max-width: 150px;
background-color: #212121;
font-weight: bold;
border-style: dashed;
border-width: 1px;
border-color: #D6B140;
text-align: center;
}

a:link {
color: #B58A24;
text-decoration: none;
}
a:visited {
color: #D1BA26;
text-decoration: none;
}
a:hover{
color: #FFC926;
text-decoration: none;
}
</style>
<div id="toolsContainer">
      Click to view tools<br />      
   <ul style="display:none;" id="tools">
                 
      <li>
                  <a href="/search?search_id=newposts">View new posts</a>        
      </li>
                 
      <li>
                  <a href="/search?search_id=egosearch">View your posts</a>        
      </li>
               
   </ul>
</div>

Note, the JS, CSS and HTML are all in there, I'm not separating them.

  • Information:
Forum:http://www.duelacademy.net/Version:PHPBB2
Type:Errors in codeTags:Drop-down,problem

Powered by PunBB
Currently 0 users have thanked Anzobuse for this post:

2
Offline

  Anzobuse

avatar
Newbie
Newbie
Code:
[panda=css]
  • Description:
Helllo.

I have the follow code which supposed to be a drop-down menu; however, I'm having issues getting the CSS correctly, I'm still a biginner in CSS so I can't seem to be able to figure out what's wrong on my own, I'd appreciate the help Very Happy The problem is the the Tools Container (Supposed to be an Image) isn't showing, only the text "Click to view tools" is showing, while I want the Image to show as well, once someone click on the Image, I want the sub-menus to drop down.

Code:
<script type="text/javascript">
  $(document).ready(function(){
     var tools = $('#tools'), toolsContainer = $('#toolsContainer');
     toolsContainer.on('click',function(){
        tools[0].style.display = (tools[0].style.display === "none") ? "block" : "none";
     });
  });
</script><style>

#toolsContainer ul{
Display: block;
position: relative;
top:5px;
overflow: visible;
background-image: url("http://i.imgur.com/uX7Kknx.png");
background-repeat: no-repeat;
}
#tools li{
padding-left:10px;
line-height:30px;
list-style-type: none;
text-decoration: none;
max-width: 150px;
background-color: #212121;
font-weight: bold;
border-style: dashed;
border-width: 1px;
border-color: #D6B140;
text-align: center;
}

a:link {
color: #B58A24;
text-decoration: none;
}
a:visited {
color: #D1BA26;
text-decoration: none;
}
a:hover{
color: #FFC926;
text-decoration: none;
}
</style>
<div id="toolsContainer">
      Click to view tools<br />      
   <ul style="display:none;" id="tools">
                 
      <li>
                  <a href="/search?search_id=newposts">View new posts</a>        
      </li>
                 
      <li>
                  <a href="/search?search_id=egosearch">View your posts</a>        
      </li>
               
   </ul>
</div>

Note, the JS, CSS and HTML are all in there, I'm not separating them.

  • Information:
Forum:http://www.duelacademy.net/Version:PHPBB2
Type:Errors in codeTags:Drop-down,problem

Powered by PunBB
Currently 0 users have thanked Anzobuse for this post:

3
Offline

  Guest

avatar
Guest
[aviso="Thread Archived"]Original poster seems to be inactive and didn't respond within 7 days in this thread. Because of this, the topic has been Archived.

If you have further questions, please open a new topic.[/aviso]

Powered by PunBB
Currently 0 users have thanked Guest for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum