The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

drop down menu with jQuery and CSS

3 posters

Go down

Solved drop down menu with jQuery and CSS

Post by MarkoNinic1994 December 5th 2012, 12:33 pm

hi guys again Smile i have added a drop down menu on my test forum and it looks like it should do but it is on the left of my forum o.O

this is the screen shoot i captured maybe you have some code to fix it up

Spoiler:


Last edited by MarkoNinic1994 on December 11th 2012, 9:54 pm; edited 1 time in total (Reason for editing : Edited)
avatar
MarkoNinic1994
Forumember

Posts : 89
Reputation : 2
Language : English,Danish,Serbian,Romanian

http://fantasypub.serbianforum.info/forum

Back to top Go down

Solved Re: drop down menu with jQuery and CSS

Post by MarkoNinic1994 December 6th 2012, 6:13 pm

Bump
avatar
MarkoNinic1994
Forumember

Posts : 89
Reputation : 2
Language : English,Danish,Serbian,Romanian

http://fantasypub.serbianforum.info/forum

Back to top Go down

Solved Re: drop down menu with jQuery and CSS

Post by MarkoNinic1994 December 7th 2012, 10:12 pm

Bump
avatar
MarkoNinic1994
Forumember

Posts : 89
Reputation : 2
Language : English,Danish,Serbian,Romanian

http://fantasypub.serbianforum.info/forum

Back to top Go down

Solved Re: drop down menu with jQuery and CSS

Post by Shek December 10th 2012, 6:23 pm

Hello! Very Happy

Could you provide the code used to bring the effect of the menu?

Regards,
Shek
Shek
Active Poster

Male Posts : 1679
Reputation : 60
Language : Portuguese and English
Location : Brazil

https://publipos.net

Back to top Go down

Solved Re: drop down menu with jQuery and CSS

Post by MarkoNinic1994 December 10th 2012, 6:37 pm

hmm yes i can this are the codes

in the overall_header
Code:
<ul class="topnav">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">Tutorials</a>

                <ul class="subnav">
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>

                </ul>
            </li>
            <li>
                <a href="#">Resources</a>
                <ul class="subnav">
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>

                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                    <li><a href="#">Sub Nav Link</a></li>
                </ul>
            </li>
            <li><a href="#">About Us</a></li>

            <li><a href="#">Advertise</a></li>
            <li><a href="#">Submit</a></li>
            <li><a href="#">Contact Us</a></li>

            <li>
                <a href="#">More</a>
                <ul class="subnav">
                    <li><a href="#">Follow Us on Twitter</a></li>
                    <li><a href="#">Like Us on Facebook</a></li>
                    <li><a href="#">Subscribe on Youtube</a></li>
                </ul>
            </li>

        </ul> 

in the css
Code:
ul.topnav {
  list-style: none;
  padding: 0 20px; 
  margin: 0;
  float: left;
  width: 920px;
  background: #222;
  font-size: 1.2em;
  background: url(http://i43.servimg.com/u/f43/14/73/12/96/topnav10.gif) repeat-x;
}
ul.topnav li {
  float: left;
  margin: 0; 
  padding: 0 15px 0 0;
  position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
  padding: 10px 5px;
  color: #fff;
  display: block;
  text-decoration: none;
  float: left;
}
ul.topnav li a:hover{
  background: url(http://i43.servimg.com/u/f43/14/73/12/96/topnav11.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
  width: 17px;
  height: 35px;
  float: left;
  background: url(http://i43.servimg.com/u/f43/14/73/12/96/subnav10.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}

/*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
  list-style: none;
  position: absolute;
  left: 0; top: 35px;
  background: #333;
  margin: 0; padding: 0;
  display: none;
  float: left;
  width: 170px;
  -webkit-border-bottom-right-radius: 05px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 05px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 05px;
  border-bottom-left-radius: 5px;
  border: 1px solid #111;
}
ul.topnav li ul.subnav li{
  margin: 0; padding: 0;
  border-top: 1px solid #252525;
  border-bottom: 1px solid #444;
  clear: both;
  width: 170px;
  -webkit-border-bottom-right-radius: 05px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 05px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 05px;
  border-bottom-left-radius: 5px;
}
html ul.topnav li ul.subnav li a {
  float: left;
  width: 145px;
  background: #333 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
  padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
  background: #222 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
}
avatar
MarkoNinic1994
Forumember

Posts : 89
Reputation : 2
Language : English,Danish,Serbian,Romanian

http://fantasypub.serbianforum.info/forum

Back to top Go down

Solved Re: drop down menu with jQuery and CSS

Post by Shek December 10th 2012, 6:52 pm

Hello! Very Happy

Replace the old CSS by this:
Code:
ul.topnav {
  position: absolute;
  top: 0%;
  list-style: none;
  padding: 0 20px;
  margin: 0;
  width: 100%;
  background: #222;
  font-size: 1.2em;
  background: url(http://i43.servimg.com/u/f43/14/73/12/96/topnav10.gif) repeat-x;
}
ul.topnav li {
  float: left;
  margin: 0;
  padding: 0 15px 0 0;
  position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
  padding: 10px 5px;
  color: #fff;
  display: block;
  text-decoration: none;
  float: left;
}
ul.topnav li a:hover{
  background: url(http://i43.servimg.com/u/f43/14/73/12/96/topnav11.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
  width: 17px;
  height: 35px;
  float: left;
  background: url(http://i43.servimg.com/u/f43/14/73/12/96/subnav10.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}

/*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
  list-style: none;
  position: absolute;
  left: 0; top: 35px;
  background: #333;
  margin: 0; padding: 0;
  display: none;
  float: left;
  width: 170px;
  -webkit-border-bottom-right-radius: 05px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 05px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 05px;
  border-bottom-left-radius: 5px;
  border: 1px solid #111;
}
ul.topnav li ul.subnav li{
  margin: 0; padding: 0;
  border-top: 1px solid #252525;
  border-bottom: 1px solid #444;
  clear: both;
  width: 170px;
  -webkit-border-bottom-right-radius: 05px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 05px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-right-radius: 05px;
  border-bottom-left-radius: 5px;
}
html ul.topnav li ul.subnav li a {
  float: left;
  width: 145px;
  background: #333 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
  padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
  background: #222 url(http://i43.servimg.com/u/f43/14/73/12/96/dropdo10.gif) no-repeat 10px center;
}
Shek
Shek
Active Poster

Male Posts : 1679
Reputation : 60
Language : Portuguese and English
Location : Brazil

https://publipos.net

Back to top Go down

Solved Re: drop down menu with jQuery and CSS

Post by MarkoNinic1994 December 11th 2012, 9:53 pm

thx it worked ^^ + to you mate Smile
avatar
MarkoNinic1994
Forumember

Posts : 89
Reputation : 2
Language : English,Danish,Serbian,Romanian

http://fantasypub.serbianforum.info/forum

Back to top Go down

Solved Re: drop down menu with jQuery and CSS

Post by SLGray December 11th 2012, 11:52 pm

Topic Solved & Locked


drop down menu with jQuery and CSS Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 51464
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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