The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

drop down menu with jQuery and CSS

View previous topic View next topic Go down

Solved drop down menu with jQuery and CSS

Post by MarkoNinic1994 on Wed 5 Dec - 13:33

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 Tue 11 Dec - 22:54; edited 1 time in total (Reason for editing : Edited)

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 on Thu 6 Dec - 19:13

Bump

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 on Fri 7 Dec - 23:12

Bump

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 Crowley on Mon 10 Dec - 19:23

Hello! Very Happy

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

Regards,

Shek Crowley
Active Poster

Male Posts : 1193
Reputation : 35
Language : Portuguese and English
Location : Brazil

http://www.shiftactif.com/

Back to top Go down

Solved Re: drop down menu with jQuery and CSS

Post by MarkoNinic1994 on Mon 10 Dec - 19:37

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;
}

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 Crowley on Mon 10 Dec - 19:52

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 Crowley
Active Poster

Male Posts : 1193
Reputation : 35
Language : Portuguese and English
Location : Brazil

http://www.shiftactif.com/

Back to top Go down

Solved Re: drop down menu with jQuery and CSS

Post by MarkoNinic1994 on Tue 11 Dec - 22:53

thx it worked ^^ + to you mate Smile

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 on Wed 12 Dec - 0:52

Topic Solved & Locked


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


SLGray
Administrator
Administrator

Male Posts : 36705
Reputation : 2445
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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